要求
输入内容全部符合正则表达式要求才可以提交成功!
代码实现
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
用户名:<input type="text" onblur="ob(0)" /><span></span><br />
密码:<input type="text" onblur="ob(1)" /><span></span><br />
确认密码:<input type="text" onblur="ob(2)" /><span></span><br />
邮箱: <input type="text" onblur="ob(3)" /><span></span><br />
手机号:<input type="text" onblur="ob(4)" /><span></span><br />
身份证号:<input type="text" onblur="ob(5)" /><span></span><br />
地址:<input type="text" onblur="ob(6)" /><span></span><br />
<input type="button" onclick="on()" value="提交" /><br />
</body>
<script>
function verify(str, expression, s) {
var b = expression.test(str);
if (b) {
s.innerHTML = "√";
} else {
s.innerHTML = "x";
}
}
function ob(a) {
var ipt = document.getElementsByTagName("input");
var s = document.getElementsByTagName("span");
var expression0 = /^[A-Z][A-z]{5,19}$/ //用户名
var expression1 = /^[A-Z][A-z0-9]+/ //密码
var expression2 = /^[A-Z][A-z0-9]+/ //确认密码
var expression3 = /^[0-9A-z]+@+[A-z0-9]+.com$/ //邮箱
var expression4 = /^1[3584]\d{9}$/ //手机号
var expression5 = /^[1-9][0-9]{16}[A-z0-9]/ //身份证号
var expression6 = /^[A-Z][A-z|_]{6,19}/ //地址
switch (a) {
case 0:
verify(ipt[0].value, expression0, s[0]);
break;
case 1:
verify(ipt[1].value, expression1, s[1]);
break;
case 2:
verify(ipt[2].value, expression2, s[2]);
break;
case 3:
verify(ipt[3].value, expression3, s[3]);
break;
case 4:
verify(ipt[4].value, expression4, s[4]);
break;
case 5:
verify(ipt[5].value, expression5, s[5]);
break;
case 6:
verify(ipt[6].value, expression6, s[6]);
break;
}
}
function on(){
var s = document.getElementsByTagName("span");
for(var i = 0; i < s.length;i++){
if(s[i].innerText == '√'){
if(i == 6){
alert("提交成功");
}else{
continue;
}
}else{
alert("提交失败");
break;
}
}
}
</script>
</html>