From 31c0dd08007cd1a5bca94531f846d153d5279941 Mon Sep 17 00:00:00 2001
From: 6437a2bc3c05b0675a61786b <6437a2bc3c05b0675a61786b@devide>
Date: Tue, 13 Jun 2023 02:52:00 +0000
Subject: [PATCH] Tue Jun 13 02:52:00 UTC 2023 inscode

---
 src/components/test.vue | 699 +++++++++++++++++++++++-----------------
 1 file changed, 412 insertions(+), 287 deletions(-)

diff --git a/src/components/test.vue b/src/components/test.vue
index 8872771..8d19e70 100644
--- a/src/components/test.vue
+++ b/src/components/test.vue
@@ -1,98 +1,102 @@
-<!-- html代码 -->
-    <!-- 背景云层 -->
-    <div id="header">
-      <div id="clouds">
-          <div class="cloud-1" data-speed="35000"></div>
-          <div class="cloud-2" data-speed="45000" data-delay="15000"></div>
-          <div class="cloud-3" data-speed="40000"></div>
-          <div class="cloud-4" data-speed="38000" data-delay="20000"></div>
-      </div>
-</div><!-- / #header -->
-
-  <div id="content">
-      <div class="container">            
-          <!-- 登录模块 -->
-          <form id="login" method="post" action="login.jsp" onsubmit="return checkForm(this);">
-              <div id="login_header"><i class="icon-home"></i>智能小区服务管理系统</div>
-              
-              <div id="login_content">
-                  <span>
-                      <input class="tip" name="username" type="text" maxlength="18" onclick="onClick(this);" onblur="onBlur(this);">
-                      <label for="username">用户名</label>
-                      <i class="icon-user"></i>
-                      <div class="tooltip" data-text="填写您的身份证号">填写您的身份证号</div>
-                  </span>
-                  <span>
-                      <input class="tip" name="password" type="password" maxlength="16" onclick="onClick(this);" onblur="onBlur(this);">
-                      <label for="password">密码</label>
-                      <i class="icon-lock"></i>
-                      <div class="tooltip" data-text="填写您的密码">填写您的密码</div>
-                  </span>
-                  <div class="option">
-                      <div class="option_result">用户类型</div>
-                      <div class="option_arrow"><b class="arrow"></b></div>
-                      <ul class="option_list">
-                          <li>住户</li>
-                          <li>管理员</li>
-                          <li>运营商</li>
-                      </ul>
-                      <div class="tooltip" data-text="选择您的用户类型">选择您的用户类型</div>
-                  </div><!-- / .option -->
-              </div><!-- / #login_content -->
-
-              <div id="login_footer">
-                  <div class="ing"></div>
-                  <button id="login_btn" type="submit">登录</button>
-              </div><!-- / #login_footer -->
-
-              <div><a id="register_link" href="javascript:void(0);">新用户注册</a></div>
-          </form><!-- / #login -->
-
-          <!-- 注册模块 -->
-          <form id="register" method="post" action="register.jsp" onsubmit="return checkForm(this);">
-              <div id="register_header"><i class="icon-home"></i>新用户注册</div>
-              
-              <div id="register_content">
-                  <span>
-                      <input class="tip" name="realname" type="text" maxlength="4" onclick="onClick(this);" onblur="onBlur(this);">
-                      <label for="realname">真实姓名</label>
-                      <i class="icon-user"></i>
-                      <div class="tooltip" data-text="填写您的真实中文姓名">填写您的真实中文姓名</div>
-                  </span>
-                  <span>
-                      <input class="tip" name="ID" type="text" maxlength="18" onclick="onClick(this);" onblur="onBlur(this);">
-                      <label for="ID">身份证号</label>
-                      <i class="icon-lock"></i>
-                      <div class="tooltip" data-text="填写您的真实身份证号码">填写您的真实身份证号码</div>
-                  </span>
-                  <span>
-                      <input class="tip" name="password" maxlength="16" type="password" onclick="onClick(this);" onblur="onBlur(this);">
-                      <label for="password">密码</label>
-                      <i class="icon-lock"></i>
-                      <div class="tooltip" data-text="填写6~16个字母或者数字">填写6~16位字母或者数字</div>
-                  </span>
-              </div><!-- / #register_content -->
-
-              <div id="register_footer">
-                  <div class="ing"></div>
-                  <button id="register_btn" type="submit">注册</button>
-              </div><!-- / #register_footer -->
-
-              <div><a id="login_link" href="javascript:void(0);">返回登录</a></div>
-          </form><!-- / #register -->
-
-      </div><!-- / .container -->
-  </div><!-- / #content-->
-
-  <div id="footer">
-      
-      <div class="container">
-
-      </div><!-- / .container -->
-
-  </div><!-- / #footer -->
-css代码
-/* #Reset & Basics (Inspired by E. Meyers)
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  
+
+    <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
+
+    <meta name="apple-mobile-web-app-title" content="CodePen">
+
+    <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
+
+    <link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" color="#111" />
+
+
+
+  <meta charset="utf-8">
+  <meta name='viewport' content='width=device-width, initial-scale=1'>
+
+  <title>CodePen - login form</title>
+
+  <link rel="stylesheet" media="screen" href="https://cpwebassets.codepen.io/assets/fullpage/fullpage-9a6f5ffcc359b81b95df109e4b8ce436f472f4f828fcc75227cd5266125d459b.css" />
+  
+
+    <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
+
+    <meta name="apple-mobile-web-app-title" content="CodePen">
+
+    <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
+
+    <link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" color="#111" />
+
+
+
+
+
+  <title>CodePen - login form</title>
+
+  <style>
+    html { font-size: 15px; }
+    html, body { margin: 0; padding: 0; min-height: 100%; }
+    body { height:100%; display: flex; flex-direction: column; }
+    .referer-warning {
+      background: black;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+      padding: 0.75em;
+      color: white;
+      text-align: center;
+      font-family: 'Lato', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, system-ui, Sans-Serif;
+      line-height: 1.2;
+      font-size: 1rem;
+      position: relative;
+      z-index: 2;
+    }
+    .referer-warning span { font-family: initial; }
+    .referer-warning h1 { font-size: 1.2rem; margin: 0; }
+    .referer-warning a { color: #56bcf9; }
+  </style>
+</head>
+
+<body class="">
+  <div class="referer-warning">
+    <h1><span>⚠️</span> Do not enter passwords or personal information on this page. <span>⚠️</span></h1>
+      This is a code demo posted by a web developer on <a href="https://codepen.io">CodePen</a>.
+    <br />
+    A referer from CodePen is required to render this page view, and your browser is not sending one (<a href="https://blog.codepen.io/2017/10/05/regarding-referer-headers/" target="_blank" rel="noreferrer noopener">more details</a>).</h1>
+  </div>
+
+  <div id="result-iframe-wrap" role="main">
+    <iframe
+      id="result"
+      srcdoc="<!DOCTYPE html>
+<html lang=&quot;en&quot; >
+
+<head>
+  <meta charset=&quot;UTF-8&quot;>
+  
+
+    <link rel=&quot;apple-touch-icon&quot; type=&quot;image/png&quot; href=&quot;https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png&quot; />
+
+    <meta name=&quot;apple-mobile-web-app-title&quot; content=&quot;CodePen&quot;>
+
+    <link rel=&quot;shortcut icon&quot; type=&quot;image/x-icon&quot; href=&quot;https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico&quot; />
+
+    <link rel=&quot;mask-icon&quot; type=&quot;image/x-icon&quot; href=&quot;https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg&quot; color=&quot;#111&quot; />
+
+
+
+  
+  <title>CodePen - login form</title>
+    <link rel=&quot;canonical&quot; href=&quot;https://codepen.io/arvinxiang/pen/mdyWQx&quot; />
+  
+  
+  
+  
+<style>
+/* #Reset &amp; Basics (Inspired by E. Meyers)
 ================================================== */
     html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
         margin: 0;
@@ -122,7 +126,7 @@ css代码
     body {
         background:#87CEFA;
         overflow:hidden;
-        font:normal 16px/1.5 Helvetica, "Microsoft Yahei", Arial, sans-serif;
+        font:normal 16px/1.5 Helvetica, &quot;Microsoft Yahei&quot;, Arial, sans-serif;
         color:#444;
         -webkit-font-smoothing:antialiased; /* Fix for webkit rendering */
         -webkit-text-size-adjust:100%;
@@ -133,9 +137,9 @@ css代码
 
 /*云层*/
     #clouds{position:absolute;top:0;right:0;bottom:0;left:0;}
-    [class^="cloud-"]{position:absolute;right:120%;width:200px;height:60px;background:white;-webkit-border-radius:200px;-moz-border-radius:200px;border-radius:200px;}
-    [class^="cloud-"]:before,[class^="cloud-"]:after{content:'';position:absolute;top:-15px;left:10px;width:100px;height:80px;background:#fff;-webkit-border-radius:100px;border-radius:100px;-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);transform:rotate(30deg);}
-    [class^="cloud-"]:after {top: -55px;left: auto;right: 15px;width: 120px;height: 120px;}
+    [class^=&quot;cloud-&quot;]{position:absolute;right:120%;width:200px;height:60px;background:white;-webkit-border-radius:200px;-moz-border-radius:200px;border-radius:200px;}
+    [class^=&quot;cloud-&quot;]:before,[class^=&quot;cloud-&quot;]:after{content:'';position:absolute;top:-15px;left:10px;width:100px;height:80px;background:#fff;-webkit-border-radius:100px;border-radius:100px;-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);transform:rotate(30deg);}
+    [class^=&quot;cloud-&quot;]:after {top: -55px;left: auto;right: 15px;width: 120px;height: 120px;}
     .cloud-1 {top: 50px;-webkit-animation: moveclouds 30s linear infinite;-moz-animation: moveclouds 30s linear infinite;-o-animation: moveclouds 30s linear infinite;animation: moveclouds 30s linear infinite;}
     .cloud-2 {top: 100px;opacity: 0.8;-webkit-transform: scale(0.8);-moz-transform: scale(0.8);transform: scale(0.8);-webkit-animation: moveclouds 45s linear infinite;-moz-animation: moveclouds 45s linear infinite;-o-animation: moveclouds 45s linear infinite;animation: moveclouds 45s linear infinite;-webkit-animation-delay: 5s;-moz-animation-delay: 5s;animation-delay: 5s;}
     .cloud-3 {top: 150px;opacity: 0.6;-webkit-transform: scale(0.6);-moz-transform: scale(0.6);transform: scale(0.6);-webkit-animation: moveclouds 40s linear infinite;-moz-animation: moveclouds 40s linear infinite;-o-animation: moveclouds 40s linear infinite;animation: moveclouds 40s linear infinite;}
@@ -167,7 +171,7 @@ css代码
     .icon-home{font-size:30px;position:relative;top:3px;}
 
     #login_content,#register_content{height:200px;padding:30px 20px;}
-    input{width:300px;padding:14px 15px;background:#F0F0F0;font:normal 16px/1.5 Helvetica,"Microsoft Yahei",Arial,sans-serif;color:#444;}
+    input{width:300px;padding:14px 15px;background:#F0F0F0;font:normal 16px/1.5 Helvetica,&quot;Microsoft Yahei&quot;,Arial,sans-serif;color:#444;}
     span{position:relative;display:inline-block;height:50px;margin-bottom:30px;}
     .tip{text-indent:80px;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out;}
     .tip:focus,.tip:active{text-indent:0;}
@@ -175,7 +179,7 @@ css代码
     .tip:focus + label,.tip:active + label{-webkit-transform:translateY(-40px);-moz-transform:translateY(-40px);transform:translateY(-40px);}
     .icon-user,.icon-lock{position:absolute;top:16px;right:14px;color:#999;}
     .tooltip{width:200px;padding:14px;position:absolute;left:20%;top:0;right:0;color:#999;background:white;text-align:left;z-index:-1;box-shadow:0 1px 3px rgba(0, 0, 0, .1);}
-    .tooltip:after{width:0;height:0;content:"";position:absolute;right:100%;top:18px;color:#87CEFA;border:8px solid;border-right-color:white;}
+    .tooltip:after{width:0;height:0;content:&quot;&quot;;position:absolute;right:100%;top:18px;color:#87CEFA;border:8px solid;border-right-color:white;}
 
     #login_footer,#register{}
     #login_btn,#register_btn{width:100%;height:60px;line-height:60px;outline:0;border:none;color:white;font-weight:bold;font-size:20px;background:#77CA60;border-radius:0 0 10px 10px;cursor:pointer;text-shadow:1px 1px 1px rgba(0, 0, 0, 0.3);}
@@ -191,190 +195,311 @@ css代码
     .option_list{background:#F3F3F3;display:none;}
     .option_list li{padding:10px 15px;float:none;}
     .option_list li:hover{background:#DFDFDF;}
-
-    Javascript代码
-    /**
-	 * 输入框被点击
-	 */
-	function onClick(){
-
-		//对函数的第一个参数进行判断
-		if (arguments[0]) {
-			var obj = arguments[0];
-		}else{
-			return false;
-		}
-
-		//获取.tooltip
-		var tooltip = $(obj).siblings('.tooltip');
-		//.tooltip如果存在，就滑出
-		if (tooltip.length != 0) {
-			//对函数第二个参数进行判断
-			if (arguments[1]) {
-				var text = arguments[1];
-			}else{
-				text = tooltip.data('text');
-			}
-			//设置提示框文字
-			tooltip.text(text);
-			//滑出提示框
-			tooltip.animate({left:'120%'});
-		};
-	}
+</style>
+
+  <script>
+  window.console = window.console || function(t) {};
+</script>
+
+  
+  
+</head>
+
+<body translate=&quot;no&quot;>
+  <!-- 背景云层 -->
+	<div id=&quot;header&quot;>
+        <div id=&quot;clouds&quot;>
+            <div class=&quot;cloud-1&quot; data-speed=&quot;35000&quot;></div>
+            <div class=&quot;cloud-2&quot; data-speed=&quot;45000&quot; data-delay=&quot;15000&quot;></div>
+            <div class=&quot;cloud-3&quot; data-speed=&quot;40000&quot;></div>
+            <div class=&quot;cloud-4&quot; data-speed=&quot;38000&quot; data-delay=&quot;20000&quot;></div>
+        </div>
+	</div><!-- / #header -->
+
+    <div id=&quot;content&quot;>
+        <div class=&quot;container&quot;>            
+            <!-- 登录模块 -->
+            <form id=&quot;login&quot; method=&quot;post&quot; action=&quot;login.jsp&quot; onsubmit=&quot;return checkForm(this);&quot;>
+                <div id=&quot;login_header&quot;><i class=&quot;icon-home&quot;></i>智能小区服务管理系统</div>
+                
+                <div id=&quot;login_content&quot;>
+                    <span>
+                        <input class=&quot;tip&quot; name=&quot;username&quot; type=&quot;text&quot; maxlength=&quot;18&quot; onclick=&quot;onClick(this);&quot; onblur=&quot;onBlur(this);&quot;>
+                        <label for=&quot;username&quot;>用户名</label>
+                        <i class=&quot;icon-user&quot;></i>
+                        <div class=&quot;tooltip&quot; data-text=&quot;填写您的身份证号&quot;>填写您的身份证号</div>
+                    </span>
+                    <span>
+                        <input class=&quot;tip&quot; name=&quot;password&quot; type=&quot;password&quot; maxlength=&quot;16&quot; onclick=&quot;onClick(this);&quot; onblur=&quot;onBlur(this);&quot;>
+                        <label for=&quot;password&quot;>密码</label>
+                        <i class=&quot;icon-lock&quot;></i>
+                        <div class=&quot;tooltip&quot; data-text=&quot;填写您的密码&quot;>填写您的密码</div>
+                    </span>
+                    <div class=&quot;option&quot;>
+                        <div class=&quot;option_result&quot;>用户类型</div>
+                        <div class=&quot;option_arrow&quot;><b class=&quot;arrow&quot;></b></div>
+                        <ul class=&quot;option_list&quot;>
+                            <li>住户</li>
+                            <li>管理员</li>
+                            <li>运营商</li>
+                        </ul>
+                        <div class=&quot;tooltip&quot; data-text=&quot;选择您的用户类型&quot;>选择您的用户类型</div>
+                    </div><!-- / .option -->
+                </div><!-- / #login_content -->
+
+                <div id=&quot;login_footer&quot;>
+                    <div class=&quot;ing&quot;></div>
+                    <button id=&quot;login_btn&quot; type=&quot;submit&quot;>登录</button>
+                </div><!-- / #login_footer -->
+
+                <div><a id=&quot;register_link&quot; href=&quot;javascript:void(0);&quot;>新用户注册</a></div>
+            </form><!-- / #login -->
+
+            <!-- 注册模块 -->
+            <form id=&quot;register&quot; method=&quot;post&quot; action=&quot;register.jsp&quot; onsubmit=&quot;return checkForm(this);&quot;>
+                <div id=&quot;register_header&quot;><i class=&quot;icon-home&quot;></i>新用户注册</div>
+                
+                <div id=&quot;register_content&quot;>
+                    <span>
+                        <input class=&quot;tip&quot; name=&quot;realname&quot; type=&quot;text&quot; maxlength=&quot;4&quot; onclick=&quot;onClick(this);&quot; onblur=&quot;onBlur(this);&quot;>
+                        <label for=&quot;realname&quot;>真实姓名</label>
+                        <i class=&quot;icon-user&quot;></i>
+                        <div class=&quot;tooltip&quot; data-text=&quot;填写您的真实中文姓名&quot;>填写您的真实中文姓名</div>
+                    </span>
+                    <span>
+                        <input class=&quot;tip&quot; name=&quot;ID&quot; type=&quot;text&quot; maxlength=&quot;18&quot; onclick=&quot;onClick(this);&quot; onblur=&quot;onBlur(this);&quot;>
+                        <label for=&quot;ID&quot;>身份证号</label>
+                        <i class=&quot;icon-lock&quot;></i>
+                        <div class=&quot;tooltip&quot; data-text=&quot;填写您的真实身份证号码&quot;>填写您的真实身份证号码</div>
+                    </span>
+                    <span>
+                        <input class=&quot;tip&quot; name=&quot;password&quot; maxlength=&quot;16&quot; type=&quot;password&quot; onclick=&quot;onClick(this);&quot; onblur=&quot;onBlur(this);&quot;>
+                        <label for=&quot;password&quot;>密码</label>
+                        <i class=&quot;icon-lock&quot;></i>
+                        <div class=&quot;tooltip&quot; data-text=&quot;填写6~16个字母或者数字&quot;>填写6~16位字母或者数字</div>
+                    </span>
+                </div><!-- / #register_content -->
+
+                <div id=&quot;register_footer&quot;>
+                    <div class=&quot;ing&quot;></div>
+                    <button id=&quot;register_btn&quot; type=&quot;submit&quot;>注册</button>
+                </div><!-- / #register_footer -->
+
+                <div><a id=&quot;login_link&quot; href=&quot;javascript:void(0);&quot;>返回登录</a></div>
+            </form><!-- / #register -->
+
+        </div><!-- / .container -->
+    </div><!-- / #content-->
 	
-	/**
-	 * 输入框失去焦点
-	 */
-	function onBlur(){
-		//对函数的第一个参数进行判断
-		if (arguments[0]) {
-			var obj = arguments[0];
-		}else{
-			return false;
-		}
-
-		//获取.tooltip
-		var tooltip = $(obj).siblings('.tooltip');
-		//.tooltip如果存在，就滑入
-		if (tooltip.length != 0) {
-			tooltip.animate({left:'20%'});
-		};
-	}
-
-	/**
-	 * 表单验证
-	 */
-	function checkForm(){
-		//对函数的第一个参数进行判断
-		if (arguments[0]) {
-			//获取当前表单
-			var form = arguments[0];
-		}else{
-			return false;
-		}
-
-		//验证规则汇总
-		var id = new RegExp(/[0-9]{18}/);//匹配数字18次，用于身份证号码匹配
-		var password = new RegExp(/\w{6,16}/);//字母6到16次，用于密码匹配
-		var chinese = new RegExp(/[^\u4e00-\u9fa5]|^$/);//匹配中文以外的字符，用于真实姓名验证
-		var email = new RegExp(/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/);//用于邮箱格式验证
-
-		//用户名username验证(同样适用身份证验证)
-		if (form.username != undefined && !id.test(form.username.value)) {
-			//不符合匹配规则
-			onClick($(form.username)[0],'身份证号码不规范，应为18位数字');
-			//阻止页面跳转
-			return false;
-		};
-
-		//密码password验证
-		if (form.password != undefined && !password.test(form.password.value)) {
-			//不符合匹配规则
-			onClick($(form.password)[0],'密码不规范，应为6~16位字母和数字');
-			//阻止页面跳转
-			return false;
-		};
-
-		//用户类型type验证
-		if ($(form).find('.option_result').text() == '用户类型') {
-			//用户没有勾选
-			onClick($('.option_result')[0],'请选择用户类型');
-			//阻止页面跳转
-			return false;
-		};
-
-		//真实姓名realname验证
-		if (form.realname != undefined && chinese.test(form.realname.value)) {
-			//有非中文字符
-			onClick($(form.realname)[0],'姓名不规范');
-			//阻止页面跳转
-			return false;
-		};
-
-		//真实身份证号码id验证
-		if (form.ID != undefined && !id.test(form.ID.value)) {
-			//不符合匹配规则
-			onClick($(form.ID)[0],'身份证号码不规范，应为18位数字');
-			//阻止页面跳转
-			return false;
-		};
-
-		//邮箱email验证
-        if (form.email != undefined && !email.test(form.email.value)){
-        	//不符合匹配规则
-        	onClick($(form.email)[0],'不是有效地电子邮件地址');
-        	//阻止页面跳转
-        	return false;
-        };
-	}
-
-
-	$(document).ready(function(){
-		/**
-		 * 展开/收起下拉列表
-		 */
-		$('.option').click(function(){
-			$(this).children('.option_list').slideToggle(100);
-			$(this).toggleClass('active');
-		});
-
-		/**
-		 * 设置option的值
-		 */
-		$('.option_list li').click(function(){
-			//获取选择的值
-			var text = $(this).text();
-			//设置option的值
-			$(this).parent().siblings('.option_result').text(text);
-			//如果存在就收起提示栏
-			var tooltip = $(this).parent();//原生js的parentNode是属性而不是方法
-			if (tooltip.length != 0) {
-				onBlur(tooltip[0]);//需要传入原生js对象
-			};
-		});
-
-		/**
-		 * 切换到注册栏
-		 */
-		$('#register_link').click(function(){
-			//滑出#login栏，滑入#register栏
-			$('#login').animate({left:'-100%'},400,function(){
-				$('#register').animate({left:'50%'});
-			});
-		});
-
-		/**
-		 * 切换到登陆栏
-		 */
-		$('#login_link').click(function(){
-			//滑出#register栏，滑入#login栏
-			$('#register').animate({left:'120%'},400,function(){
-				$('#login').animate({left:'50%'});
-			});
-		});
-
-		/**
-		 * 登录
-		 */
-		$('#login_btn').click(function(){
-			var $obj = $(this);
-			$obj.text('登录中...');
-			setTimeout(function(){
-				$obj.text('登录');
-			},5000);
-		});
-
-		/**
-		 * 注册
-		 */
-		$('#register_btn').click(function(){
-			var $obj = $(this);
-			$obj.text('注册中...');
-			setTimeout(function(){
-				$obj.text('注册');
-			},5000);
-		});
-
-		
-
-	});
\ No newline at end of file
+    <div id=&quot;footer&quot;>
+        
+        <div class=&quot;container&quot;>
+
+        </div><!-- / .container -->
+
+    </div><!-- / #footer -->
+    <script src=&quot;https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js&quot;></script>
+
+  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+      <script id=&quot;rendered-js&quot; >
+/**
+ * 输入框被点击
+ */
+function onClick() {
+
+  //对函数的第一个参数进行判断
+  if (arguments[0]) {
+    var obj = arguments[0];
+  } else {
+    return false;
+  }
+
+  //获取.tooltip
+  var tooltip = $(obj).siblings('.tooltip');
+  //.tooltip如果存在，就滑出
+  if (tooltip.length != 0) {
+    //对函数第二个参数进行判断
+    if (arguments[1]) {
+      var text = arguments[1];
+    } else {
+      text = tooltip.data('text');
+    }
+    //设置提示框文字
+    tooltip.text(text);
+    //滑出提示框
+    tooltip.animate({ left: '120%' });
+  };
+}
+
+/**
+ * 输入框失去焦点
+ */
+function onBlur() {
+  //对函数的第一个参数进行判断
+  if (arguments[0]) {
+    var obj = arguments[0];
+  } else {
+    return false;
+  }
+
+  //获取.tooltip
+  var tooltip = $(obj).siblings('.tooltip');
+  //.tooltip如果存在，就滑入
+  if (tooltip.length != 0) {
+    tooltip.animate({ left: '20%' });
+  };
+}
+
+/**
+ * 表单验证
+ */
+function checkForm() {
+  //对函数的第一个参数进行判断
+  if (arguments[0]) {
+    //获取当前表单
+    var form = arguments[0];
+  } else {
+    return false;
+  }
+
+  //验证规则汇总
+  var id = new RegExp(/[0-9]{18}/); //匹配数字18次，用于身份证号码匹配
+  var password = new RegExp(/\w{6,16}/); //字母6到16次，用于密码匹配
+  var chinese = new RegExp(/[^\u4e00-\u9fa5]|^$/); //匹配中文以外的字符，用于真实姓名验证
+  var email = new RegExp(/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/); //用于邮箱格式验证
+
+  //用户名username验证(同样适用身份证验证)
+  if (form.username != undefined &amp;&amp; !id.test(form.username.value)) {
+    //不符合匹配规则
+    onClick($(form.username)[0], '身份证号码不规范，应为18位数字');
+    //阻止页面跳转
+    return false;
+  };
+
+  //密码password验证
+  if (form.password != undefined &amp;&amp; !password.test(form.password.value)) {
+    //不符合匹配规则
+    onClick($(form.password)[0], '密码不规范，应为6~16位字母和数字');
+    //阻止页面跳转
+    return false;
+  };
+
+  //用户类型type验证
+  if ($(form).find('.option_result').text() == '用户类型') {
+    //用户没有勾选
+    onClick($('.option_result')[0], '请选择用户类型');
+    //阻止页面跳转
+    return false;
+  };
+
+  //真实姓名realname验证
+  if (form.realname != undefined &amp;&amp; chinese.test(form.realname.value)) {
+    //有非中文字符
+    onClick($(form.realname)[0], '姓名不规范');
+    //阻止页面跳转
+    return false;
+  };
+
+  //真实身份证号码id验证
+  if (form.ID != undefined &amp;&amp; !id.test(form.ID.value)) {
+    //不符合匹配规则
+    onClick($(form.ID)[0], '身份证号码不规范，应为18位数字');
+    //阻止页面跳转
+    return false;
+  };
+
+  //邮箱email验证
+  if (form.email != undefined &amp;&amp; !email.test(form.email.value)) {
+    //不符合匹配规则
+    onClick($(form.email)[0], '不是有效地电子邮件地址');
+    //阻止页面跳转
+    return false;
+  };
+}
+
+
+$(document).ready(function () {
+  /**
+   * 展开/收起下拉列表
+   */
+  $('.option').click(function () {
+    $(this).children('.option_list').slideToggle(100);
+    $(this).toggleClass('active');
+  });
+
+  /**
+   * 设置option的值
+   */
+  $('.option_list li').click(function () {
+    //获取选择的值
+    var text = $(this).text();
+    //设置option的值
+    $(this).parent().siblings('.option_result').text(text);
+    //如果存在就收起提示栏
+    var tooltip = $(this).parent(); //原生js的parentNode是属性而不是方法
+    if (tooltip.length != 0) {
+      onBlur(tooltip[0]); //需要传入原生js对象
+    };
+  });
+
+  /**
+   * 切换到注册栏
+   */
+  $('#register_link').click(function () {
+    //滑出#login栏，滑入#register栏
+    $('#login').animate({ left: '-100%' }, 400, function () {
+      $('#register').animate({ left: '50%' });
+    });
+  });
+
+  /**
+   * 切换到登陆栏
+   */
+  $('#login_link').click(function () {
+    //滑出#register栏，滑入#login栏
+    $('#register').animate({ left: '120%' }, 400, function () {
+      $('#login').animate({ left: '50%' });
+    });
+  });
+
+  /**
+   * 登录
+   */
+  $('#login_btn').click(function () {
+    var $obj = $(this);
+    $obj.text('登录中...');
+    setTimeout(function () {
+      $obj.text('登录');
+    }, 5000);
+  });
+
+  /**
+   * 注册
+   */
+  $('#register_btn').click(function () {
+    var $obj = $(this);
+    $obj.text('注册中...');
+    setTimeout(function () {
+      $obj.text('注册');
+    }, 5000);
+  });
+
+
+
+});
+//# sourceURL=pen.js
+    </script>
+
+  
+</body>
+
+</html>
+"
+      sandbox="allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation" allow="accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr; web-share" allowTransparency="true"
+      allowpaymentrequest="true" allowfullscreen="true" class="result-iframe">
+      </iframe>
+  </div>
+
+</body>
+
+</html>
-- 
GitLab