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

标签：order   ext   出生日期   格式不正确   passwords   idt   mail   lsp   color   

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

以上方法只有在提交的时候才能发现数据的错误，对于用户来说很不方便，以下的改进代码可以增加页面的用户友好性：

复制代码
1
2
3
4
5
6
20
21
22
23
24 <td height="600px" ">
25
26

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

标签：order   ext   出生日期   格式不正确   passwords   idt   mail   lsp   color   

原文地址：https://www.cnblogs.com/wwyydd/p/14180629.html