1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>表单验证</title>
6 <script src="../js/jquery-1.12.4.js"></script>
7 <!--<script src="../js/demo.js"></script>-->
8 <script>
9 //1、验证用户名
10 function checkUserName(t) {
11 //用户名：6-12位，非空，首字母
12 let span = t.next();
13 span.empty();
14 let v = t.val();
15 //定义一个正则表达式
16 let reg = /^[a-zA-Z]\w{5,11}$/;
17 if (!v) {
18 span.html("用户名不能为空").css("color", "red");
19 return 0;
20 } else if (!reg.test(v)) {
21 span.html("用户名首位字母,6-12位").css("color", "red");
22 return 0;
23 }
24 span.html("用户名正确").css("color", "green");
25 return 1;
26 }
27
28 //2、验证密码
29 function checkPassWord(t) {
30 //密码：6-12位数字_字母，非空
31 let span = t.next();
32 span.empty();
33 let v = t.val();
34 //定义一个正则表达式
35 let reg = /^\w{6,12}$/;
36 if (!v) {
37 span.html("密码不能为空").css("color", "red");
38 return 0;
39 } else if (!reg.test(v)) {
40 span.html("密码6-12位数字_字母").css("color", "red");
41 return 0;
42 }
43 span.html("密码正确").css("color", "green");
44 return 1;
45 }
46
47 //3、验证重复输入密码
48 function checkRePassWord(t) {
49 //密码：6-12位数字_字母，非空
50 let span = t.next();
51 span.empty();
52 let v = t.val();
53 if (!checkPassWord($("#password"))) {
54 span.html("您的密码不符合要求").css("color", "red");
55 return 0;
56 }
57 if ($("#password").val() !== v) {
58 span.html("两次密码输入不一致").css("color", "red");
59 return 0;
60 }
61 span.html("重复输入密码正确").css("color", "green");
62 return 1;
63 }
64
65 //4、验证电话号码
66 function checkTel(t) {
67 //电话号码：数字，非空，11位，第一位是1，第二位356789
68 let span = t.next();
69 span.empty();
70 let v = t.val();
71 //定义一个正则表达式
72 let reg = /^1[356789]\d{9}$/;
73 if (!v) {
74 span.html("电话号码不能为空").css("color", "red");
75 return 0;
76 } else if (!reg.test(v)) {
77 span.html("电话号码必须是数字，非空，11位，第一位是1，第二位356789").css("color", "red");
78 return 0;
79 }
80 span.html("电话号码正确").css("color", "green");
81 return 1;
82 }
83
84 //5、验证邮箱
85 function checkEmail(t) {
86 //邮箱：非空，参考han@126.com,han@yahoo.com.cn,han@yahoo.cn
87 let span = t.next();
88 span.empty();
89 let v = t.val();
90 //定义一个正则表达式
91 let reg = /^([a-zA-Z]\w+@\w+\\.com(\\.cn)?)|([a-zA-Z]\w+@\w+\\.cn)$/;
92 if (!v) {
93 span.html("邮箱不能为空").css("color", "red");
94 return 0;
95 } else if (!reg.test(v)) {
96 span.html("参考han@126.com,han@yahoo.com.cn,han@yahoo.cn").css("color", "red");
97 return 0;
98 }
99 span.html("邮箱正确").css("color", "green");
100 return 1;
101 }
102
103 //6、验证性别
104 function checkGender(t) {
105 let span = $(".gender_span");
106 span.empty();
107 let flag = false;
108 for (let i = 0; i < t.length; i++) {
109 if (t[i].checked) {
110 flag = true;
111 break;
112 }
113 }
114 if (!flag) {
115 span.html("性别必须选中一个").css("color", "red");
116 return 0;
117 }
118 span.html("性别选中正确").css("color", "green");
119 return 1;
120 }
121
122 //7、验证爱好
123 function checkHobby(t) {
124 let span = $(".hobby_span");
125 span.empty();
126 let flag = false;
127 for (let i = 0; i < t.length; i++) {
128 if (t[i].checked) {
129 flag = true;
130 break;
131 }
132 }
133 if (!flag) {
134 span.html("爱好必须选中一个").css("color", "red");
135 return 0;
136 }
137 span.html("爱好选中正确").css("color", "green");
138 return 1;
139 }
140
141 //8、验证身份证
142 function checkIdentityNum(t) {
143 let span = t.next();
144 span.empty();
145 let v = t.val();
146 if (!v) {
147 span.html("身份证不能为空").css("color", "red");
148 return 0;
149 }
150 //判断长度
151 let length = v.length;
152 if (length !== 18) {
153 span.html("身份证必须18位").css("color", "red");
154 return 0;
155 }
156 //前17位是否是数字
157 let pre17 = v.substring(0, v.length - 1);
158 let reg = /^\d{17}$/;
159 if (!reg.test(pre17)) {
160 span.html("身份证前17位必须是数字").css("color", "red");
161 return 0;
162 }
163 //截取前2位判断是否符合
164 let pre2Arr = [
165 "11", "12", "13", "14", "21", "22", "23",
166 "21", "22", "23",
167 "31", "32", "33", "34", "35", "36", "37",
168 "41", "42", "43", "44", "45", "46",
169 "50", "51", "52", "53", "54",
170 "61", "62", "63", "64", "65",
171 "81", "82", "83"
172 ];
173 let pre2 = v.substring(0, 2);
174 let flag = false;
175 for (let i = 0; i < pre2Arr.length; i++) {
176 if (pre2Arr[i] === pre2) {
177 flag = true;
178 break;
179 }
180 }
181 if (!flag) {
182 span.html("身份证前2位不符合规则！").css("color", "red");
183 return 0;
184 }
185 //5、截取year判断是否符合要求[1900-2019]
186 let year = parseInt(v.substring(6, 10));
187 let date = new Date();
188 if (year > date.getFullYear() || year < 1900) {
189 span.html("身份证年份必须在1900-2019").css("color", "red");
190 return 0;
191 }
192 //6、截取month是否符合要求[1-12]
193 let month = parseInt(v.substring(10, 12));
194 if (month > 12 || month < 1) {
195 span.html("身份证月份必须在1-12").css("color", "red");
196 return 0;
197 }
198 //7、截取date是否符合要求[1-28][1-29][1-30][1-31]
199 let day = parseInt(v.substring(12, 14));
200 if (month === 4 || month === 6 || month === 9 || month === 11) {
201 if (day > 30 || day <= 0) {
202 span.html("身份证日期必须在1-30范围").css("color", "red");
203 return 0;
204 }
205 } else if (month === 2) {
206 if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
207 if (day > 29 || day <= 0) {
208 span.html("身份证日期必须在1-29范围").css("color", "red");
209 return 0;
210 }
211 } else {
212 if (day > 28 || day <= 0) {
213 span.html("身份证日期必须在1-28范围").css("color", "red");
214 return 0;
215 }
216 }
217 } else {
218 if (day > 31 || day <= 0) {
219 span.html("身份证日期必须在1-31范围").css("color", "red");
220 return 0;
221 }
222 }
223 //8、截取校验码
224 let lastChar = v.substring(17);
225 reg = /^[\dxX]$/;
226 if (!reg.test(lastChar)) {
227 span.html("身份证的最后一位校验码只能是数字、X、x").css("color", "red");
228 return 0;
229 }
230 span.html("身份证正确").css("color", "green");
231 return 1;
232 }
233
234 //9、验证上传文件类型及大小
235 function checkFiles(t) {
236 let arr = ["png", "jpg", "bmp", "jpeg", "gif"];
237 let span = t.next();
238 span.empty();
239 let name = "";
240 let size = 0;
241 //console.log(t);
242 if (t[0].files.length === 0) {
243 span.html("请上传文件").css("color", "red");
244 return 0;
245 }
246 name = t[0].files[0].name;
247 size = t[0].files[0].size;
248 let suffix = name.substring(name.lastIndexOf(".") + 1);
249 let flag = false;
250 for (let i = 0; i < arr.length; i++) {
251 if (arr[i] === suffix) {
252 flag = true;
253 break;
254 }
255 }
256 if (!flag) {
257 span.html("请上传图片类型文件").css("color", "red");
258 return 0;
259 }
260 if (size > 3 * 1024 * 1024) {
261 span.html("请上传图片大小不能超过3MB").css("color", "red");
262 return 0;
263 }
264 span.html("图片正确").css("color", "green");
265 return 1;
266
267 }
268
269
270 $(function () {
271 //1、username失去焦点验证
272 $("#username").blur(function () {
273 checkUserName($(this));
274 });
275
276 //2、password失去焦点验证
277 $("#password").blur(function () {
278 checkPassWord($(this));
279 });
280
281 //3、password失去焦点验证
282 $("#rePassword").blur(function () {
283 checkRePassWord($(this));
284 });
285
286 //4、tel失去焦点验证
287 $("#tel").blur(function () {
288 checkTel($(this));
289 });
290
291 //5、email失去焦点验证
292 $("#email").blur(function () {
293 checkEmail($(this));
294 });
295
296 //6、gender改变时
297 $(".gender").change(function () {
298 checkGender($(".gender"));
299 });
300
301 //7、hobby改变时
302 $(".hobby").change(function () {
303 checkHobby($(".hobby"));
304 });
305
306 //8、identityNum失去焦点验证
307 $("#identityNum").blur(function () {
308 checkIdentityNum($(this));
309 });
310
311 //8、identityNum失去焦点验证,注意要使用change事件，否则没有效果
312 $("#picPath").change(function () {
313 //console.log($(this));
314 checkFiles($(this));
315 });
316
317 //执行表单提交验证，如果返回true就提交，否则不提交
318 $("#fm").submit(function () {
319 let num = checkUserName($("#username")) &
320 checkPassWord($("#password")) &
321 checkRePassWord($("#rePassword")) &
322 checkTel($("#tel")) &
323 checkEmail($("#email")) &
324 checkGender($(".gender")) &
325 checkHobby($(".hobby")) &
326 checkIdentityNum($("#identityNum")) &
327 checkFiles($("#picPath"));
328 return num > 0;
329 });
330
331 });
332 </script>
333
334 </head>
335 <body>
336 <form id="fm" action="http://www.baidu.com" method="post" enctype="multipart/form-data">
337 <div>
338 <span>UserName:</span>
339 <input type="text" name="username" id="username" placeholder="username"/>
340 <span>*</span>
341 </div>
342 <div>
343 <span>PassWord:</span>
344 <input type="password" name="password" id="password" placeholder="password"/>
345 <span>*</span>
346 </div>
347 <div>
348 <span>RePassWord:</span>
349 <input type="password" name="rePassword" id="rePassword" placeholder="rePassword"/>
350 <span>*</span>
351 </div>
352 <div>
353 <span>Tel:</span>
354 <input type="text" name="tel" id="tel" placeholder="tel" maxlength="11"/>
355 <span>*</span>
356 </div>
357 <div>
358 <span>Email:</span>
359 <input type="text" name="email" id="email" placeholder="email"/>
360 <span>*</span>
361 </div>
362 <div>
363 <span>Gender:</span>
364 <input type="radio" name="gender" class="gender" value="0"/>女
365 <input type="radio" name="gender" class="gender" value="1"/>男
366 <span class="gender_span">*</span>
367 </div>
368 <div>
369 <span>Hobby:</span>
370 <input type="checkbox" name="hobby" class="hobby" value="movie"/>movie
371 <input type="checkbox" name="hobby" class="hobby" value="sport"/>sport
372 <input type="checkbox" name="hobby" class="hobby" value="climb"/>climb
373 <input type="checkbox" name="hobby" class="hobby" value="travel"/>travel
374 <input type="checkbox" name="hobby" class="hobby" value="football"/>football
375 <span class="hobby_span">*</span>
376 </div>
377 <div>
378 <span>IdentityNum:</span>
379 <input type="text" name="identityNum" id="identityNum" maxlength="18" placeholder="rePassword"/>
380 <span>*</span>
381 </div>
382 <div>
383 <span>Image:</span>
384 <input type="file" name="picPath" id="picPath"/>
385 <span>*</span>
386 </div>
387 <div>
388 <input type="submit"/>
389 <input type="reset"/>
390 </div>
391 </form>
392 </body>
393 </html>
