<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background-color: #ccc;
}
#dv {
width: 400px;
padding: 50px;
line-height: 40px;
margin: 100px auto;
border: 1px solid #999;
background: #efefef;
}
span {
margin-left: 30px;
font-size: 12px;
}
input {
margin-left: 10px;
}
</style>
</head>
<body>
<div id="dv">
<lable>Q Q</lable><input type="text" id="qq"><span></span><br>
<lable>手机</lable><input type="text" id="phone"><span></span><br>
<lable>邮箱</lable><input type="text" id="email"><span></span><br>
<lable>座机</lable><input type="text" id="telephone"><span></span><br>
<lable>姓名</lable><input type="text" id="name"><span></span>
</div>
<script src="H1.js"></script>
<script>
checkInput(my$("qq"),/^\d{5,11}$/);
checkInput(my$("phone"),/^\d{11}$/);
checkInput(my$("email"),/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/);
checkInput(my$("telephone"),/^\d{3,4}[-]\d{7,8}$/);
checkInput(my$("name"),/^[\u4e00-\u9fa5]{2,6}$/);
function checkInput(input,reg) {
input.onblur = function () {
if (reg.test(this.value)){
this.nextElementSibling.innerText = "正确了";
this.nextElementSibling.style.color = "green";
} else{
this.nextElementSibling.innerText = "错误";
this.nextElementSibling.style.color = "red";
}
}
}
</script>
</body>
</html>
实现效果: