js：表单校验（获取元素、事件）

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