今天给后台登录做权限限制，自然而然就需要一个后台登录页面，于是模仿了一下博客园的登录页，简单写了一个页面，前端校验的逻辑也是从简设置的，说一下思路吧:
在用户名输入框和密码输入框各自设置一个监听事件:change(),当输入框中内容改变，失去焦点时触发。
取出输入的值，与设置好的正则表达式进行比对，如果比对成功，给submit按钮设置一个xxxError:"false"属性；如果比对失败，在预先设置好的span中添加对应的错误提示内容。
在点击提交按钮时，先判断是否为空，没有这一步，页面刷新之后，输入栏即使为空，也可以直接提交。
判断空值之后，在取出submit按钮中的xxxError属性，如果值为true，放弃提交，显示对应的错误提示内容，这一步的目的在于，使用相同的span显示用户名和密码的提示信息时，
后面的错误信息会覆盖之前的，如果用户名格式依旧错误，但是密码从错误的改到正确了，之前的提示信息就消失了。
接下来上代码:
1 <html>
2 <head>
3 <link rel="stylesheet" href="https://zhishitu.com/" target="_blank">
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>