版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.l {
background-color: 9ad10e;
border: 1px solid 0ed145
}
.w {
line-height: 50px;
}
</style>
</head>
<body>
<div align="center" style="width: 300px; height: 500px; background-color：0ed145; margin: 0 auto;margin-top: 50px;">
<div style="width: 300px; text-align: center;">输入信息检测</div>
<div class="w">用 户 名:<input class="l" type="text" id="id1" /></div>
<div class="w">密 码: <input class="l" type="text" id="id2" /></div>
<div class="w">确认密码: <input class="l" type="text" id="id3" /></div>
<div class="w">邮 箱: <input class="l" id="id4" type="text" /></div>
<div class="w">手 机 号: <input class="l" type="text" id="id5" /></div>
<div class="w">身份证号: <input class="l" type="text" id="id6" /></div>
<div class="w">地 址: <input id="id7" class="l" type="text" /></div>
<div class="w"><input class="l" type="submit" value="点击查看" onclick="fun()" /> </div>
<div id="ss"></div>
</div>
<script type="application/javascript">
var zz = [
/^[A-Z]{1}\w{5,19}$/,
/^[A-Z]{1}.{7,14}$/,
/^[A-Z]{1}.{7,14}$/,
/^[A-z0-9]+@[A-z0-9]+.com$/,
/^1[3-9]{1}\d{9}$/,
/^\d{18}|^\d{17}(X|x)$/,
/^[\u4e00-\u9fa5][A-z0-9\u4e00-\u9fa5]+$/,
];
function fun() {
var resut;
var str01 = "";
var show = document.getElementById("ss");
for(var a = 1; a < 8; a++) {
str01 = document.getElementById("id" + a).value;
var zhe = zheng[a - 1];
resut = zhe.test(str01);
}
if(resut != "") {
show.innerText = "√";
show.style.color = "green";
} else {
show.innerText = "×";
show.style.color = "red";
}
}
</script>
</body>
</html>
效果如下：
