表单校验
用原生JS写一个简单的表单验证
首先，是html部分
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<div class="divAll"> <div id="titles">新用户注册</div> <div id="contents"> <h3>基本信息</h3> <hr width="95%" color="#f2f2f2"/> <form action="#" onSubmit="return checkForm()"> <div id="form-itemGroup"> <label for="userName">用户名：</label> <input type="text" id="userName" class="userName" onBlur="checkUserName()" oninput="checkUserName()"> <span class="default" id="nameErr">请输入至少3位的用户名</span> </div> <div id="form-itemGroup"> <label for="userPasword">密码：</label> <input type="password" id="userPasword" class="userName" onBlur="checkPassword()" oninput="checkPassword()"> <span class="default" id="passwordErr">请输入4到8位的密码</span> </div> <div id="form-itemGroup"> <label for="userConfirmPasword">确认密码：</label> <input type="password" id="userConfirmPasword" class="userName" onBlur="ConfirmPassword()" oninput="ConfirmPassword()"> <span class="default" id="conPasswordErr">请再输入一遍密码</span> </div> <div id="form-itemGroup"> <label for="userPhone">手机号码：</label> <input type="text" id="userPhone" class="userName" onBlur="checkPhone()" oninput="checkPhone()"> <span class="default" id="phoneErr">请输入11位手机号码</span> </div> <div> <button type="submit" class="divBtn">注册</button> </div> </form> </div> </div> |
接着，为其加上CSS样式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
<style type="text/css"> .divAll{ width:800px; font-family:'黑体'; margin:50px auto; } #titles{ font-weight:bold; font-size:18px; height:50px; line-height:50px; background:#FFF9F3; text-align:center; border:1px solid #CCC;; } #contents{ margin-top:20px; background:#FFF9F3; border:1px solid #CCC;; } #form-itemGroup{ padding:10px; } #form-itemGroup label{ display:inline-block; width:100px; height:32px; line-height:32px; color:#666; text-align:right; } #form-itemGroup .userName{ width:200px; height:40px; line-height:40px; border:1px solid #CCC; } #form-itemGroup .default{ width:200px; height:32px; line-height:32px; color:#999; } #form-itemGroup .error{ height:32px; line-height:32px; color:#F00; } #form-itemGroup .success{ height:32px; line-height:32px; color:#096; } .divBtn{ margin-top:20px; margin-left:200px; width:100px; height:32px; line-height:32px; padding: 0px 0px 0px 5px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-left: 3px solid rgb(108, 226, 108); line-height: 20px; width: 640px; clear: both; outline: 0px !important; border-radius: 0px !important; border-top: 0px !important; border-right: 0px !important; border-bottom: 0px !important; border-image: initial !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; box-sizing: content-box !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; min-height: auto !important; color: gray !important;">#F93; margin-bottom:10px; color:#ffffff; font-weight:bold; border:none; } </style> |
最后是JS部分
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
<script type="text/javascript"> function checkForm(){ var nametip = checkUserName(); var passtip = checkPassword(); var conpasstip = ConfirmPassword(); var phonetip = checkPhone(); return nametip && passtip && conpasstip && phonetip; } //验证用户名 function checkUserName(){ var username = document.getElementById('userName'); var errname = document.getElementById('nameErr'); var pattern = /^\w{3,}$/; //用户名格式正则表达式：用户名要至少三位 if(username.value.length == 0){ errname.innerHTML="用户名不能为空" errname.className="error" return false; } if(!pattern.test(username.value)){ errname.innerHTML="用户名不合规范" errname.className="error" return false; } else{ errname.innerHTML="OK" errname.className="success"; return true; } } //验证密码 function checkPassword(){ var userpasswd = document.getElementById('userPasword'); var errPasswd = document.getElementById('passwordErr'); var pattern = /^\w{4,8}$/; //密码要在4-8位 if(!pattern.test(userpasswd.value)){ errPasswd.innerHTML="密码不合规范" errPasswd.className="error" return false; } else{ errPasswd.innerHTML="OK" errPasswd.className="success"; return true; } } //确认密码 function ConfirmPassword(){ var userpasswd = document.getElementById('userPasword'); var userConPassword = document.getElementById('userConfirmPasword'); var errConPasswd = document.getElementById('conPasswordErr'); if((userpasswd.value)!=(userConPassword.value) || userConPassword.value.length == 0){ errConPasswd.innerHTML="上下密码不一致" errConPasswd.className="error" return false; } else{ errConPasswd.innerHTML="OK" errConPasswd.className="success"; return true; } } //验证手机号 function checkPhone(){ var userphone = document.getElementById('userPhone'); var phonrErr = document.getElementById('phoneErr'); var pattern = /^1[34578]\d{9}$/; //验证手机号正则表达式 if(!pattern.test(userphone.value)){ phonrErr.innerHTML="手机号码不合规范" phonrErr.className="error" return false; } else{ phonrErr.innerHTML="OK" phonrErr.className="success"; return true; } } </script> |
好了，打开浏览器测试一下吧
填写数据，可以！
以上就是JavaScript表单验证完美代码
