完成登录与注册页面的HTML+CSS+JS，其中的输入项检查包括：
用户名6-12位
首字母不能是数字
只能包含字母和数字
密码6-12位
HTML代码如下：
1 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:sketch=""> 2 <head> 3 <title>用户登入验证</title> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <link rel="shortcut icon" href="../static/img/logo.ico" type="image/x-icon"/> 6 <link rel="stylesheet" href="../static/css/one.css" type="text/css"/> 7 <script type="text/javascript" src="../static/js/public.js"></script> 8 </head> 9 <body style="height:100%; padding:0px;"> 10 <form class="login-body" onSubmit="return validate()" name="theForm" action="#" method="post"> 11 12 <div class="login-hd"> 13 <img src="../static/img/logo.png" class="logo"> 14 </div> 15 16 <div class="center-wrap" id="centerWrap"> 17 <div class="login-center"> 18 <div class="bd-logo"> 19 <img src="../static/img/superroot-logo.png" alt="shareSource" border="0" height="103" width="373"> 20 </div> 21 </div> 22 23 <div class="z-bd"> 24 <div class="login-panel" id="loginPanel"> 25 <h3 class="panel-hd cl-link-blue"></h3> 26 <div class="controls first"> 27 <svg class="iconphone" width="20px" height="20px" viewBox="0 0 20 20"> 28 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" 29 sketch:type="MSPage"> 30 <g id="2-copy-2" sketch:type="MSArtboardGroup" 31 transform="translate(-505.000000, -357.000000)" fill="#666"> 32 <path d="M517.388314,366.868305 C519.068314,366.001784 520.220053,364.252653 520.220053,362.231784 C520.220053,359.350479 517.883966,357.014392 515.002662,357.014392 C512.121357,357.014392 509.78527,359.350479 509.78527,362.231784 C509.78527,364.252653 510.936575,366.001784 512.616575,366.868305 C508.246575,367.938305 505.002662,371.879175 505.002662,376.57961 C505.002662,376.81961 505.197009,377.014392 505.437444,377.014392 C505.677444,377.014392 505.872227,376.81961 505.872227,376.57961 C505.872227,371.537001 509.960053,367.449175 515.002662,367.449175 C520.04527,367.449175 524.133096,371.537001 524.133096,376.57961 C524.133096,376.81961 524.327444,377.014392 524.567879,377.014392 C524.807879,377.014392 525.002662,376.81961 525.002662,376.57961 C525.002662,371.879175 521.758749,367.938305 517.388314,366.868305 L517.388314,366.868305 Z M510.654835,362.231784 C510.654835,359.830479 512.601357,357.883957 515.002662,357.883957 C517.403966,357.883957 519.350488,359.830479 519.350488,362.231784 C519.350488,364.632653 517.403966,366.57961 515.002662,366.57961 C512.601357,366.57961 510.654835,364.632653 510.654835,362.231784 L510.654835,362.231784 Z" 33 id="id" sketch:type="MSShapeGroup"></path> 34 </g> 35 </g> 36 </svg> 37 <input name="username" placeholder="用户名" type="text"> 38 </div> 39 <div class="controls two"> 40 <svg class="iconphone" width="20px" height="20px" viewBox="0 0 20 20"> 41 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" 42 sketch:type="MSPage"> 43 <g id="2-copy-2" sketch:type="MSArtboardGroup" 44 transform="translate(-505.000000, -407.000000)" fill="#666"> 45 <path d="M515,418.304324 C514.12782,418.304324 513.421091,418.888119 513.421091,419.608723 C513.421091,419.995004 513.624357,420.341947 513.947394,420.580774 L513.947394,421.782554 C513.947394,422.262857 514.418637,422.652187 515.00003,422.652187 C515.581302,422.652187 516.052667,422.262857 516.052667,421.782554 L516.052667,420.580774 C516.375703,420.341947 516.579,419.995004 516.579,419.608723 C516.57897,418.888119 515.87221,418.304324 515,418.304324 L515,418.304324 L515,418.304324 Z M522.368454,414.391327 L521.315788,414.391327 L521.315788,412.217421 C521.315788,409.335657 518.488418,407 515,407 C511.511582,407 508.684212,409.335657 508.684212,412.217421 L508.684212,414.391327 L507.631576,414.391327 C506.178003,414.391327 505,415.364503 505,416.565234 L505,424.826193 C505,426.026824 506.178003,427 507.631576,427 L522.368424,427 C523.821422,427 525,426.026899 525,424.826193 L525,416.565234 C525.00003,415.364478 523.821422,414.391327 522.368454,414.391327 L522.368454,414.391327 L522.368454,414.391327 Z M515,407.869583 C517.906571,407.869583 520.263152,409.816309 520.263152,412.217396 L520.263152,414.391302 L509.737544,414.391302 L509.737544,412.217396 L509.736848,412.217396 C509.736848,409.816309 512.093459,407.869583 515,407.869583 L515,407.869583 L515,407.869583 Z M523.947364,424.826093 C523.947364,425.546622 523.240604,426.130392 522.368454,426.130392 L507.631606,426.130392 C506.759396,426.130392 506.052667,425.546622 506.052667,424.826093 L506.052667,416.565234 C506.052667,415.84468 506.759426,415.260835 507.631606,415.260835 L522.368454,415.260835 C523.240635,415.260835 523.947364,415.844705 523.947364,416.565234 L523.947364,424.826093 L523.947364,424.826093 L523.947364,424.826093 Z" 46 id="pw" sketch:type="MSShapeGroup"></path> 47 </g> 48 </g> 49 </svg> 50 <input name="password" placeholder="密码" type="password"> 51 </div> 52 <br> 53 <input type="radio" name="role" value="stu" checked><font style="font-weight:bold; ">student</font> 54 <input type="radio" name="role" value="teacher"><font style="font-weight:bold;">teacher</font><br><br> 55 <div id="error_box" style="color: red;"></div> 56 <div class="controls last"> 57 <input class="btn-a" value="登录" type="submit" onclick="return validate();"> 58 <span style="display: none" id="login_error_msg"></span> 59 </div> 60 <div class="controls bside" style="border: none"> 61 <input value="1" name="remember" id="remember" type="checkbox"> 62 <label for="remember">保存登录信息</label> 63 <a class="link-forget cl-link-blue" href="get_password.html">忘记密码?</a> 64 <a class="link-forget cl-link-blue" href="regis.html">新用户注册</a> 65 </div> 66 </div> 67 </div> 68 69 </div> 70 71 72 </form> 73 </body> 74 </html>
js代码如下：
1 function validate() { 2 var oError = document.getElementById('error_box'); 3 oError.innerHTML = ""; 4 if (theForm.username.value == "") { 5 alert("请输入用户名!"); 6 theForm.username.focus(); 7 return false; 8 } else { 9 if (theForm.username.value.length < 6 || theForm.username.value.length > 12) { 10 oError.innerHTML = '用户名请在6到12位之间'; 11 return false; 12 } else if ((theForm.username.value.charCodeAt(0) >= 48) && (theForm.username.value.charCodeAt(0) <= 57)) { 13 oError.innerHTML = '首字母不可为数字'; 14 return false; 15 } else for (var i = 0; i < theForm.username.value.length; i++) { 16 if ( 17 ((theForm.username.value.charCodeAt(i) < 48) || (theForm.username.value.charCodeAt(i) > 57)) 18 && 19 ((theForm.username.value.charCodeAt(i) < 97) || (theForm.username.value.charCodeAt(i) > 122)) 20 ) { 21 oError.innerHTML = '用户名只能包含数字和小写字母'; 22 return false; 23 } 24 } 25 } 26 if (theForm.password.value == "") { 27 alert("请输入密码！"); 28 theForm.password.focus(); 29 return false; 30 } else { 31 if (theForm.password.value.length < 6 || theForm.password.value.length > 12) { 32 oError.innerHTML = '密码请在6到12位之间'; 33 return false; 34 } 35 } 36 return true; 37 }
运行结果如下：
注册页两次密码是否一致
注册页面HTML代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>注册</title> 6 <!--引入CSS文件--> 7 <link rel="stylesheet" href="../static/css/second.css"> 8 <link rel="stylesheet" href="../static/layui/css/layui.css" media="all"> 9 <!--引入js文件--> 10 <script src="../static/js/public.js"></script> 11 <script src="../static/layui/layui.js" charset="utf-8"></script> 12 <script src="../static/js/jquery.js" charset="utf-8"></script> 13 </head> 14 <body> 15 <div class="regis_box"> 16 <!--css--> 17 <div class=""> 18 <!--头部提示--> 19 <div class="font_title"> 20 注册新用户 21 <hr class=""> 22 </div> 23 <!--表单--> 24 <form class="layui-form" role="form" id="form_regis" method="post" action=" #" name="form_regis" onSubmit="return registration()"> 25 <!--每一行--> 26 <div class="layui-form-item"> 27 <label class="layui-form-label">登录帐号</label> 28 <div class="layui-input-block"> 29 <input type="text" name="user_name" autocomplete="off" placeholder="登录用户名，不少于6个字符" class="layui-input"> 30 </div> 31 </div> 32 33 <div class="layui-form-item"> 34 <label class="layui-form-label">显示名称</label> 35 <div class="layui-input-block"> 36 <input type="text" name="user_title" autocomplete="off" placeholder="显示名称" class="layui-input"> 37 </div> 38 </div> 39 40 <div class="layui-form-item"> 41 <label class="layui-form-label">密码</label> 42 <div class="layui-input-block"> 43 <input type="password" name="user_password" placeholder="密码6到12位，只能包含字母、数字" autocomplete="off" 44 class="layui-input"> 45 </div> 46 </div> 47 48 <div class="layui-form-item"> 49 <label class="layui-form-label">确认密码</label> 50 <div class="layui-input-block"> 51 <input type="password" name="check_password" placeholder="请输入确认密码" autocomplete="off" class="layui-input"> 52 </div> 53 </div> 54 <div id="error_box" style="color: red;"> 55 <br> 56 </div> 57 <!--注册按钮--> 58 <div class="btn_submit_regis"> 59 <button type="submit" class="layui-btn layui-btn-normal">注册</button> 60 </div> 61 <!--协议提示--> 62 </form> 63 </div> 64 </div> 65 </body> 66 </html>
注册页面js代码：
1 function registration() { 2 var oError = document.getElementById('error_box'); 3 oError.innerHTML = "<br>"; 4 if (form_regis.user_name.value.length < 6 || form_regis.user_name.value.length > 12) { 5 oError.innerHTML = '用户名请在6到12位之间'; 6 return false; 7 } else if ((form_regis.user_name.value.charCodeAt(0) >= 48) && (form_regis.user_name.value.charCodeAt(0) <= 57)) { 8 oError.innerHTML = '首字母不可为数字'; 9 return false; 10 } else for (var i = 0; i < form_regis.user_name.value.length; i++) { 11 if ( 12 ((form_regis.user_name.value.charCodeAt(i) < 48) || (form_regis.user_name.value.charCodeAt(i) > 57)) 13 && 14 ((form_regis.user_name.value.charCodeAt(i) < 97) || (form_regis.user_name.value.charCodeAt(i) > 122)) 15 ) { 16 oError.innerHTML = '用户名只能包含数字和小写字母'; 17 return false; 18 } 19 } 20 21 if (form_regis.user_password.value.length < 6 || form_regis.user_password.value.length > 12) { 22 oError.innerHTML = '密码请在6到12位之间'; 23 return false; 24 } else if (form_regis.user_password.value != form_regis.check_password.value) { 25 oError.innerHTML = '两次密码不一样'; 26 return false; 27 } 28 return true; 29 }
运行结果：
