js作业之表格验证
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
margin: 5px 0;
padding: 15px 0;
border: 1px solid white;
}
span{
display: inline-block;
width: 200px;
display: none;
}
</style>
</head>
<body>
<fieldset id="">
<legend>淘宝表单验证</legend>
<div id="">
用户名：<input type="" name="" id="" value="" />
<span id="">
*请输入5-20位字符
</span>
</div>
<div id="">
密码：<input type="password" name="" id="" value="" />
<span id="">
*请输入密码
</span>
</div>
<div id="">
重复密码：<input type="password" name="" id="" value="" />
<span id="">
*请再次输入密码
</span>
</div>
<div id="">
邮箱：<input type="" name="" id="" value="" />
<span id="">
*请输入邮箱
</span>
</div>
</fieldset>
<script type="text/javascript">
var divs=document.getElementsByTagName("div");
var inputs=document.getElementsByTagName("input");
var spans=document.getElementsByTagName("span");
for(var i=0;i<4;i++){
divs[i].children[0].onfocus=function(){
this.parentNode.children[1].style.display="inline-block"
this.parentNode.style.backgroundColor="antiquewhite"
this.parentNode.style.border="1px solid black"
}
divs[i].children[0].onblur=function(){
this.parentNode.style.backgroundColor="";
this.parentNode.style.border="";
if(inputs[0].value.length<5){
spans[0].innerHTML="*错误";
spans[0].style.color="red";
}else{
spans[0].innerHTML="*√";
spans[0].style.color="green"
}
if(inputs[1].value.length<1){
spans[1].innerHTML="*错误";
spans[1].style.color="red";
}else{
spans[1].innerHTML="*√";
spans[1].style.color="green"
}
if(inputs[1].value!=inputs[2].value){
spans[2].innerHTML="*密码不一致";
spans[2].style.color="red";
}
else if(inputs[2].value.length<1){
spans[2].innerHTML="*错误";
spans[2].style.color="red";
}
else{
spans[2].innerHTML="*√";
spans[2].style.color="green"
}
var reg=/^\w+([\-_\.]?\w*)*@\w+(\.\w+){1,3}$/i
if(!reg.test(inputs[3].value)){
spans[3].innerHTML="*错误";
spans[3].style.color="red";
}else{
spans[3].innerHTML="*√";
spans[3].style.color="green"
}
}
}
</script>
</body>
</html>
效果：