今天給后台登錄做權限限制，自然而然就需要一個后台登錄頁面，於是模仿了一下博客園的登錄頁，簡單寫了一個頁面，前端校驗的邏輯也是從簡設置的，說一下思路吧:
在用戶名輸入框和密碼輸入框各自設置一個監聽事件: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 width: 100%; 10 height: 100%; 11 } 12 13 div.loginDiv { 14 width: 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 width: 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 width: 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="width:70px;background:#007bff;color:white;"> 139 </form> 140 </div> 141 </div> 142 </div> 143 144 </body> 145 </html>