<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
fieldset {
width: 800px;
height: 500px;
margin: auto;
position: relative;
background-color: aquamarine;
border-radius: 10px;
}
#did {
border: 0px solid paleturquoise;
height: 25px;
margin-top: 5px;
width: 200px;
}
.inp {
width: 300px;
height: 30px;
border-radius: 5px;
border: 2px solid black;
border-radius: 5px;
margin-top: 30px;
}
#did div {
position: absolute;
top: 66px;
display: none;
}
.tdpos {
position: relative;
}
#sub {
width: 100px;
height: 25px;
text-align: center;
position: absolute;
left: 180px;
top: 430px;
}
</style>
</head>
<body>
<form action="http://www.baidu.com" method="post" onsubmit="return btnSubmit();">
<fieldset id="">
<legend>表单验证</legend>
<table width="600px">
<tr height="50px">
<td align="right" width="70px">用户名:</td>
<td class="tdpos">
<input type="text" name="" class="inp" value="" onfocus="getFocus(this)"
onblur="userNameloseFocus(this)" />
<div id="did">
<div>中英文均可，最长6~12位</div>
<div>用户名格式错误</div>
<div>用户名格式正确</div>
</div>
</td>
</tr>
<tr height="50px">
<td align="right" width="70px">邮 箱:</td>
<td class="tdpos">
<input type="text" name="" class="inp" value="" onfocus="getFocus(this)"
onblur="mailLoseFocus(this)" />
<div id="did">
<div>开头是数字，最长6~12位</div>
<div>邮箱格式错误</div>
<div>邮箱格式正确</div>
</div>
</td>
</tr>
<tr height="50px">
<td align="right" width="70px">手机号:</td>
<td class="tdpos">
<input type="text" name="" class="inp" value="" onfocus="getFocus(this)"
onblur="phoneLoseFocus(this)" />
<div id="did">
<div>第一位必定为1，第二位必定为3或4或5或7或8，其他位置的可以为0-9</div>
<div>手机号格式错误</div>
<div>手机号格式正确</div>
</div>
</td>
</tr>
<tr height="50px">
<td align="right" width="70px">身份证号:</td>
<td class="tdpos">
<input type="text" name="" class="inp" value="" onfocus="getFocus(this)"
onblur="IDLoseFocus(this)" />
<div id="did">
<div>前面17位数字，最后一位校检码可以是0~9的数字或x</div>
<div>身份证号格式错误</div>
<div>身份证号格式正确</div>
</div>
</td>
</tr>
</table>
<input type="submit" name="" id="sub" value="提交" />
</fieldset>
</form>
<script type="text/javascript">
function getFocus(a) {
var first = a.nextElementSibling.children[0];
first.style.display = "block";
first.style.backgroundColor = "black";
first.style.color = "white";
//隐藏
var second = a.nextElementSibling.children[1];
second.style.display = "none";
var third = a.nextElementSibling.children[2];
third.style.display = "none";
}
function userNameloseFocus(a) {
var first = a.nextElementSibling.children[0];
first.style.display = "none";
//对输入框中的数据进行校验
var reg = /^([a-zA-Z0-9_-]|[\u4E00-\u9FA5]){3,20}$/;
//验证格式是否正确
var result = reg.test(a.value);
console.log(result);
//如果格式正确
if (result == true) {
var third = a.nextElementSibling.children[2];
third.style.display = "block";
third.style.backgroundColor = "skyblue";
third.style.color = "white";
a.style.borderColor = "skyblue";
} else {
//如果格式错误
var second = a.nextElementSibling.children[1];
second.style.display = "block";
second.style.backgroundColor = "red";
second.style.color = "white";
a.style.borderColor = "red";
}
}
function mailLoseFocus(a) {
var first = a.nextElementSibling.children[0];
first.style.display = "none";
//对输入框中的数据进行校验
var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
//验证格式是否正确
var result = reg.test(a.value);
console.log(result);
//如果格式正确
if (result == true) {
var third = a.nextElementSibling.children[2];
third.style.display = "block";
third.style.backgroundColor = "skyblue";
third.style.color = "white";
a.style.borderColor = "skyblue";
} else {
//如果格式错误
var second = a.nextElementSibling.children[1];
second.style.display = "block";
second.style.backgroundColor = "red";
second.style.color = "white";
a.style.borderColor = "red";
}
}
function phoneLoseFocus(a) {
var first = a.nextElementSibling.children[0];
first.style.display = "none";
//对输入框中的数据进行校验
var reg = /^1([38][0-9]|4[5-9]|5[0-3,5-9]|66|7[0-8]|9[89])[0-9]{8}$/;
//验证格式是否正确
var result = reg.test(a.value);
console.log(result);
//如果格式正确
if (result == true) {
var third = a.nextElementSibling.children[2];
third.style.display = "block";
third.style.backgroundColor = "skyblue";
third.style.color = "white";
a.style.borderColor = "skyblue";
} else {
//如果格式错误
var second = a.nextElementSibling.children[1];
second.style.display = "block";
second.style.backgroundColor = "red";
second.style.color = "white";
a.style.borderColor = "red";
}
}
function IDLoseFocus(a) {
var first = a.nextElementSibling.children[0];
first.style.display = "none";
//对输入框中的数据进行校验
var reg = /\d{17}(\d|X|x)/;
//验证格式是否正确
var result = reg.test(a.value);
console.log(result);
//如果格式正确
if (result == true) {
var third = a.nextElementSibling.children[2];
third.style.display = "block";
third.style.backgroundColor = "skyblue";
third.style.color = "white";
a.style.borderColor = "skyblue";
} else {
//如果格式错误
var second = a.nextElementSibling.children[1];
second.style.display = "block";
second.style.backgroundColor = "red";
second.style.color = "white";
a.style.borderColor = "red";
}
}
function btnSubmit() {
//先获取所有的输入框
var inpArr = document.getElementsByClassName("inp");
var status = false; //假设没有红色输入框
for (var i = 0; i < inpArr.length; i++) {
if (inpArr[i].style.borderColor == "red" || inpArr[i].value == "") {
status = true;
break;
}
}
if (status == true) {
alert("格式错误，请检查");
return false;
} else {
return true;
}
}
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
