今天给后台登录做权限限制，自然而然就需要一个后台登录页面，于是模仿了一下博客园的登录页，简单写了一个页面，前端校验的逻辑也是从简设置的，说一下思路吧:
在用户名输入框和密码输入框各自设置一个监听事件:change(),当输入框中内容改变，失去焦点时触发。
取出输入的值，与设置好的正则表达式进行比对，如果比对成功，给submit按钮设置一个xxxError:"false"属性；如果比对失败，在预先设置好的span中添加对应的错误提示内容。
在点击提交按钮时，先判断是否为空，没有这一步，页面刷新之后，输入栏即使为空，也可以直接提交。
判断空值之后，在取出submit按钮中的xxxError属性，如果值为true，放弃提交，显示对应的错误提示内容，这一步的目的在于，使用相同的span显示用户名和密码的提示信息时，
后面的错误信息会覆盖之前的，如果用户名格式依旧错误，但是密码从错误的改到正确了，之前的提示信息就消失了。
接下来上代码:
1 <html> 2 <head> 3 <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> 4 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> 5 <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> 6 7 <style> 8 div.container { 9 100%; 10 height: 100%; 11 } 12 13 div.loginDiv { 14 398px; 15 height: 500px; 16 background: lightgray; 17 margin: 50px auto; 18 border: 1px solid lightgray; 19 } 20 21 div.login-top { 22 height: 165px; 23 margin-bottom: 1.5rem; 24 text-align: center; 25 margin-top: 45px; 26 color: white; 27 } 28 29 span.login-title { 30 font-size: 24px; 31 } 32 33 div .login-pic { 34 height: 110px; 35 100%; 36 margin: 40px auto; 37 font-size: 15px; 38 } 39 40 div .login-form { 41 text-align: center; 42 margin-top: 60px; 43 } 44 45 div .login-form input { 46 300px; 47 margin: 0px auto; 48 } 49 50 </style> 51 52 <script> 53 $(function () { 54 /** 55 * 校验用户名格式 56 */ 57 $("#username").change(function () { 58 //准备正则表达式 59 var regName = /^[u2E80-u9FFFa-zA-Z0-9_-]{2,12}$/; 60 var content = $(this).val(); 61 //校验用户名 62 if (!regName.test(content)) { 63 $("#ErrorMsg").text("用户名只能是2-12位中文，数字或字母的组合"); 64 $("#ErrorMsg").css("color", "red"); 65 $("#submitBtn").attr("nameError","true"); 66 } else { 67 $("#ErrorMsg").text(""); 68 $("#submitBtn").attr("nameError","false"); 69 } 70 }); 71 72 /** 73 * 校验密码格式 74 */ 75 $("#password").change(function () { 76 //准备正则表达式 77 var regPassword = /^[0-9a-zA-Z!@#$%^&*]{4,16}$/; 78 var content = $(this).val(); 79 //校验密码 80 if (!regPassword.test(content)) { 81 $("#ErrorMsg").text("密码只能是4-16位数字，字母或特殊字符的组合"); 82 $("#ErrorMsg").css("color", "red"); 83 $("#submitBtn").attr("pwdError","true"); 84 } else { 85 $("#ErrorMsg").text(""); 86 $("#submitBtn").attr("pwdError","false"); 87 } 88 }); 89 90 /** 91 * 点击提交按钮 92 */ 93 $("#submitBtn").click(function(){ 94 //用户名密码非空判断 95 if($("#username").val().lenght==0 || $("#password").val().length==0) { 96 $("#ErrorMsg").text("用户名密码不能为空！"); 97 $("#ErrorMsg").css("color", "red"); 98 return false; 99 } 100 if($(this).attr("nameError")=="true") { 101 $("#ErrorMsg").text("用户名只能是2-12位中文，数字或字母的组合"); 102 return false; 103 } 104 if ($(this).attr("pwdError")=="true") { 105 $("#ErrorMsg").text("密码只能是4-16位数字，字母或特殊字符的组合"); 106 return false; 107 108 } 109 return true; 110 }); 111 }); 112 113 </script> 114 115 116 </head> 117 <body> 118 <div class="navitagorDiv"> 119 120 </div> 121 122 <div class="container"> 123 <div class="loginDiv"> 124 <div class="login-top"> 125 <span class="login-title">后台登录</span> 126 <div class="login-pic"> 127 <img src="adminLogin.png" width="78px" height="78px"/><br> 128 <span>代码改变世界</span> 129 <span id="ErrorMsg" class="help-block"></span> 130 </div> 131 </div> 132 133 <div class="login-form"> 134 <form action="admin_login" method="post"> 135 <input type="text" placeholder="登录用户名" id="username" name="username" class="form-control"><br> 136 <input type="password" id="password" placeholder="密码" name="password" class="form-control"><br> 137 <input type="submit" id="submitBtn" value="登录" class="form-control" 138 style="70px;background:#007bff;color:white;"> 139 </form> 140 </div> 141 </div> 142 </div> 143 144 </body> 145 </html>