JavaScript正则RegExp验证表单输入框并提示
用1-5序号标注代码逻辑顺序，用注释讲解代码运行用途，如有错误欢迎指正。
|
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.ok{color:green}
.err{color:red}
.hidden{display:none}
</style>
</head>
<body>
<form>
密码:<input id="upwd" type="password">
<span id="msgUpwd" class="hidden">必须6位数字</span><br>
生日:<input id="birth">
<span id="msgBirth" class="hidden">必须符合日期格式</span><br>
身份证号:<input id="pid">
<span id="msgPid" class="hidden">必须符合身份证号格式规范</span><br>
手机号:<input id="mobile">
<span id="msgMobile" class="hidden">必须符合手机号格式规则</span><br>
邮箱:<input id="email">
<span id="msgEmail" class="hidden">必须符合邮箱格式规则</span><br>
qq:<input id="qq">
<span id="msgQQ" class="hidden">必须符合qq号格式规范</span><br>
<input id="btnSubmit" type="button" value="提交">
</form>
<script>
//4、通过失去焦点时获取的4个数据，进行reg.test(正则.test)判断数据格式并返回状态
function vali(elem,reg,msgSpan,errMsg){
if(reg.test(elem.value)){//如果验证通过
msgSpan.innerHTML="格式正确!";
msgSpan.className="ok";
return true;
}else{//否则
msgSpan.innerHTML=errMsg;
msgSpan.className="err";
return false;
}
}
function bind(elem,reg,msgSpan,errMsg){
//2、当密码框获得焦点时，通过bind传来的4个数据，对应的显示内容
elem.onfocus=function(){
msgSpan.className="";
msgSpan.innerHTML=errMsg;
};
//3、当密码框失去焦点时，调用vali函数，并传入从bind函数传来的4个数据
elem.onblur=
elem.onkeyup=function(){
vali(elem,reg,msgSpan,errMsg)
}
}
//1、一开始，就首先就往bind函数中传入对应的4个属性。
bind(upwd,/^\d{6}$/,msgUpwd,"必须是6位数字"); //获得焦点就会显示提示
bind(
birth,
/^\d{4}\/\d{2}\/\d{2}$/,
msgBirth,
"必须符合日期格式"
);
bind(
pid,
/^\d{15}(\d{2}[0-9Xx])?$/,
msgPid,
"必须符合身份证号格式"
);
//5、按下提交按钮，再次获取4个数据，并通过返回的状态，全通过才能下一步。
btnSubmit.onclick=function(){
var rUpwd=vali(upwd,/^\d{6}$/,msgUpwd,"请输入6位数字"); //错误时提交会显示提示
var rBirth=vali(birth,/^\d{4}\/\d{2}\/\d{2}$/,msgBirth,"必须符合日期格式");
var rPid=vali(pid,/^\d{15}(\d{2}[0-9Xx])?$/,msgPid,"必须符合身份证号格式");
if(rUpwd&&rBirth&&rPid)
alert("提交成功！");
}
</script>
</body>
</html>
|
THE END
