JavaScript 表单的格式等有效性校验（获取元素、事件）
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 <tr>
2 <td>
3 用户名
4 </td>
5 <td>
6 <input type="text" name="user" size="34px" id="user"/>
7 </td>
8 </tr>
9
10 <tr>
11 <td>
12 密码
13 </td>
14 <td>
15 <input type="password" name="password" size="34px" id="password" />
16 </td>
17 </tr>
（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 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>注册页面</title>
6 <script>
7 function checkForm(){
8 var uValue = document.getElementById("user").value;
9 if(uValue==""){
10 alert("用户名不能为空!");
11 return false;
12 }
13
14 var pValue = document.getElementById("password").value;
15 if(pValue==""){
16 alert("密码不能为空!");
17 return false;
18 }
19
20 var rpValue = document.getElementById("repassword").value;
21 if(rpValue!=pValue){
22 alert("两次密码输入不一致!");
23 return false;
24 }
25
26 var eValue = document.getElementById("email").value;
27 if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
28 alert("邮箱格式不正确!");
29 return false;
30 }
31 }
32 </script>
33 </head>
34 <body>
35 <table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
36 <tr>
37 <td height="600px" ">
38 <form action="#" method="get" name="regForm" onsubmit="return checkForm()">
39 <table border="1px" width="450px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
40 <tr>
41 <td>
42 用户名
43 </td>
44 <td>
45 <input type="text" name="user" size="34px" id="user"/>
46 </td>
47 </tr>
48
49 <tr>
50 <td>
51 密码
52 </td>
53 <td>
54 <input type="password" name="password" size="34px" id="password" />
55 </td>
56 </tr>
57
58 <tr>
59 <td>
60 确认密码
61 </td>
62 <td>
63 <input type="password" name="repassword" size="34px" id="repassword"></input>
64 </td>
65 </tr>
66
67 <tr>
68 <td>
69 Email
70 </td>
71 <td>
72 <input type="text" name="email" size="34px" id="email"/>
73 </td>
74 </tr>
75
76 <tr>
77 <td>
78 姓名
79 </td>
80 <td>
81 <input type="text" name="username" size="34px" id="username"></input>
82 </td>
83 </tr>
84
85 <tr>
86 <td>
87 性别
88 </td>
89 <td>
90 <input type="radio" name="sex" value="男"/>男
91 <input type="radio" name="sex" value="女"/>女
92 </td>
93 </tr>
94
95 <tr>
96 <td>
97 出生日期
98 </td>
99 <td>
100 <input type="text" name="birthday" size="34px" id="birthday"></input>
101 </td>
102 </tr>
103
104 <tr>
105 <td colspan="2">
106 <center>
107 <input type="submit" value="注册" />
108 </center>
109 </td>
110 </tr>
111 </table>
112 </form>
113 </td>
114 </tr>
115 </table>
116 </body>
117 </html>
4、改进
以上方法只有在提交的时候才能发现数据的错误，对于用户来说很不方便，以下的改进代码可以增加页面的用户友好性：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>注册页面</title>
6 <script>
7 function showTips(id,info){
8 document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>";
9 }
10
11 function check(id,info){
12 var uValue = document.getElementById(id).value;
13 if(uValue==""){
14 document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
15 }else{
16 document.getElementById(id+"span").innerHTML="";
17 }
18 }
19 </script>
20 </head>
21 <body>
22 <table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
23 <tr>
24 <td height="600px" ">
25 <form action="#" method="get" name="regForm" onsubmit="return checkForm()">
26 <table border="1px" width="450px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
27 <tr>
28 <td>
29 用户名
30 </td>
31 <td>
32 <input type="text" name="user" size="34px" id="user"
33 onfocus="showTips('user','用户名必填！')"
34 onblur="check('user','用户名不能为空！')"/>
35 <span id="userspan"></span>
36 </td>
37 </tr>
38
39 <tr>
40 <td>
41 密码
42 </td>
43 <td>
44 <input type="password" name="password" size="34px" id="password"
45 onfocus="showTips('password','密码必填')"
46 onblur="check('password','密码不能为空!')"/>
47 <span id="passwordspan"></span>
48 </td>
49 </tr>
50
51 <tr>
52 <td>
53 确认密码
54 </td>
55 <td>
56 <input type="password" name="repassword" size="34px" id="repassword"></input>
57 </td>
58 </tr>
59
60 <tr>
61 <td>
62 Email
63 </td>
64 <td>
65 <input type="text" name="email" size="34px" id="email"/>
66 </td>
67 </tr>
68
69 <tr>
70 <td>
71 姓名
72 </td>
73 <td>
74 <input type="text" name="username" size="34px" id="username"></input>
75 </td>
76 </tr>
77
78 <tr>
79 <td>
80 性别
81 </td>
82 <td>
83 <input type="radio" name="sex" value="男"/>男
84 <input type="radio" name="sex" value="女"/>女
85 </td>
86 </tr>
87
88 <tr>
89 <td>
90 出生日期
91 </td>
92 <td>
93 <input type="text" name="birthday" size="34px" id="birthday"></input>
94 </td>
95 </tr>
96
97 <tr>
98 <td colspan="2">
99 <center>
100 <input type="submit" value="注册" />
101 </center>
102 </td>
103 </tr>
104 </table>
105 </form>
106 </td>
107 </tr>
108 </table>
109 </body>
110 </html>
转自：
https://www.cnblogs.com/zhai1997/p/12217085.html
好看请赞，养成习惯:) 本文来自博客园，作者：靠谱杨， 转载请注明原文链接：https://www.cnblogs.com/rainbow-1/p/14139350.html
欢迎来我的51CTO博客主页踩一踩 我的51CTO博客
文章中的公众号名称可能有误，请统一搜索：靠谱杨的秘密基地
