一般做到注册页面的时候，当用户填完信息，都需要对他们的信息进行验证，这就要用到正则表达式，具体看下面这个例子。
效果图：（当用户填写的信息不符合规范时显示错误提示）
我只提供了html结构和js，样式你们按照自己的设计稿自己写，我是分别给正确的时候和错误的时候加了不同的class，用了不同的高度，正确是高度小，可以把提示的红字隐藏。
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
|
<div id="wrap"> <h1>注册</h1> <div> <input type="text" class='match' name='user' placeholder='请输入用户名' /> <span>字母开头,长度5-10位字母数字下划线</span> </div> <div> <input type="password" class='match' name='pwd' placeholder='请输入密码' /> <span>字母数字长度6-18位</span> </div> <div> <input type="password" name='pwd2' placeholder='请再次输入密码' /> <span>两次密码不一致</span> </div> <div> <input type="text" class='match' name="tel" placeholder='请输入电话' /> <span>电话号码格式不正确</span> </div> <div> <input type="text" class='match' name="mail" placeholder='请输入e-mail' /> <span>邮箱格式不正确</span> </div> <div> <input type="text" class='match' name="IDCard" placeholder='请输入身份证' /> <span>证件格式不正确</span> </div> <div class='submit'> <input type="submit" value='注册' /> </div> <p id='tip'>请先输入密码</p></div> |
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
|
//正则表达式已//双斜杠开始和结束，限制必须要以什么什么开头要在之前加^，限制必须要以什么什么结尾要在后面加$，例：/^正则$/<script type="text/javascript"> var reg = { user:/^[a-zA-Z]\w{4,9}$/, //用来判断用户名，第一位不能为数字，也就是小写字母或者大写字母，后面的内容\w表示字符（数字字母下划线） //要求是5-10位字符，所以出去第一位，还需要4-9位的\w pwd:/^[\da-zA-Z]{6,18}$/, //用来判断密码，html结构中要求是数字字符6到18位，\d表示数字 tel:/^1[34578]\d{9}$/, //用来判断电话号码，通常手机号第一位为1，第二位只可能出现3.4.5.7.8，后面剩下的9位数字随机 mail:/^[1-9a-zA-Z_]\w*@[a-zA-Z0-9]+(\.[a-zA-Z]{2,})+$/, //用来判断邮箱，通常邮箱没有以0开头的，所以第一位为1-9数字或者小写字母或者大写字母，第二位开始任意字符 //也可以只有第一位没有第二位，*表示至少0个，@后面同理，小写字母或者大写字母或者数字，.需要转意符，所以写成\. //点后面通常是com或者cn或者com.cn，所以是小写字母或者大写字母至少两位 IDCard:/^[1-9]\d{16}[\dxX]$/, //用来判断身份证，通常第一位不为零，所以取1-9的数字，中间的16位数字随机，最后一位要么是数字要么是X }; var arr = [ document.getElementsByName('user')[0], document.getElementsByName('pwd')[0], document.getElementsByName('tel')[0], document.getElementsByName('mail')[0], document.getElementsByName('IDCard')[0] ]; for(var i=0;i<arr.length;i++){ arr[i].onblur = function(){ if(this.value){ if(reg[this.name].test(this.value)){ this.parentNode.className = 'right'; //判断正确的时候加的class }else{ this.parentNode.className = 'wrong'; //判断错误的时候加的class this.focus(); }; }; }; }; var oTip = document.getElementById('tip'); var opwd = document.getElementsByName('pwd2')[0]; opwd.onfous = function(){ if(!arr[1].value){ arr[1].focus(); oTip.className = 'show'; setTimeout(function () { oTip.className = ''; },1000); }; }; opwd.onblur = function(){ if(this.value){ if(this.value != arr[1].value){ this.focus(); this.parentNode.className ='wrong'; }else{ this.parentNode.className ='right'; }; }; };</script> |
以上所述是小编给大家介绍的正则表达式进行页面表单验证功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对服务器之家网站的支持！
原文链接：http://blog.csdn.net/gl0ry/article/details/60478792
