1、表单校验步骤
（1）确定事件（submit事件），创建一个函数并和该事件绑定。
（2）书写函数对输入的数据是否合法进行校验（需要设定ID并通过ID来获取用户输入的数据的值）。
（3）输入的信息合法，可以正常提交；不合法的话，不能提交用户信息并给出提示信息。
2、校验函数
（1）非空校验：
通过ID获取值，对是否为空进行校验。
复制代码
1 var uValue = document.getElementById("user").value;
2 if(uValue""){
3 alert("用户名不能为空!");
4 return false;
5 }
6
7 var pValue = document.getElementById("password").value;
8 if(pValue""){
9 alert("密码不能为空!");
10 return false;
11 }
复制代码
相应的表单中要设置ID属性，以便通过ID获取表单中的数据。
复制代码
1
2
3 用户名
4
5
6
7
8
9
10
11
12 密码
13
14
15
16
17
复制代码
（2）确认密码校验：
1 var rpValue = document.getElementById("repassword").value;
2 if(rpValue!=pValue){
3 alert("两次密码输入不一致!");
4 return false;
5 }
（3）邮箱格式校验（正则表达式：https://www.cnblogs.com/zhai1997/p/11354683.html）：
1 var eValue = document.getElementById("email").value;
2 if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
3 alert("邮箱格式不正确!");
4 return false;
5 }
完整代码
复制代码
1
2
3
4
5 注册页面
6
33
34
35
36
37 <td height="600px" ">
38
39
40
41
44
47
48
49
50
53
56
57
58
59
62
65
66
67
68
71
74
75
76
77
80
83
84
85
86
89
93
94
95
96
99
102
103
104
105
110
111
|
42 用户名 43 |
45 46 |
|
51 密码 52 |
54 55 |
|
60 确认密码 61 |
63 64 |
|
69 Email 70 |
72 73 |
|
78 姓名 79 |
81 82 |
|
87 性别 88 |
90 男 91 女 92 |
|
97 出生日期 98 |
100 101 |
|
106 107 108 109 |
|
112
113
114
115
116
117
复制代码
4、改进
以上方法只有在提交的时候才能发现数据的错误，对于用户来说很不方便，以下的改进代码可以增加页面的用户友好性：
复制代码
1
2
3
4
5 注册页面
6
20
21
22
23
24 <td height="600px" ">
25
26
27
28
31
37
38
39
40
43
49
50
51
52
55
58
59
60
61
64
67
68
69
70
73
76
77
78
79
82
86
87
88
89
92
95
96
97
98
103
104
|
29 用户名 30 |
32 <input type="text" name="user" size="34px" id="user" 33 onfocus="showTips('user','用户名必填！')" 34 onblur="check('user','用户名不能为空！')"/> 35 36 |
|
41 密码 42 |
44 <input type="password" name="password" size="34px" id="password" 45 onfocus="showTips('password','密码必填')" 46 onblur="check('password','密码不能为空!')"/> 47 48 |
|
53 确认密码 54 |
56 57 |
|
62 Email 63 |
65 66 |
|
71 姓名 72 |
74 75 |
|
80 性别 81 |
83 男 84 女 85 |
|
90 出生日期 91 |
93 94 |
|
99 100 101 102 |
|
105
106
107
108
109
110