<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>实现带样式的表单验证</title>
<link rel="Stylesheet" href="css/5.css" />
</head>
<body>
<form id="form1">
<h2>增加管理员</h2>
<table>
<tr>
<td>姓名：</td>
<td>
<input name="username"/>
<span>*</span>
</td>
<td>
<div class="vali_info">
10个字符以内的字母、数字或下划线的组合
</div>
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" name="pwd"/>
<span>*</span>
</td>
<td>
<div class="vali_info">6位数字</div>
</td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input type="submit" value="保存"/>
<input type="reset" value="重填"/>
</td>
</tr>
</table>
</form>
<script>
//1、
//查找姓名文本框
var txtName=document.getElementsByName("username")[0]; //若没有指明下标，返回是类数组
//查找密码框
var txtPwd=document.getElementsByName("pwd")[0];
//2、
//当文本框获得焦点
txtName.onfocus=txtPwd.onfocus=function(){ //密码框和文本框获取焦点是一样的
//获得当前文本框对象作为查找的起点
var input=this;
console.log(input);
//3、
//查找当前文本框的父元素td 的下一个兄弟td元素 的第一个孩子div
var div=input.parentNode.nextElementSibling.children[0];
//4、
//清除div的class，让div显示出来
div.className="";
}
//密码框和文本框获取焦点是一样的
//实现需求2：当文本框失去焦点，验证文本框中输入的内容是否符合要求
//1、查找触发事件的元素：两个文本框前面已经找到了
//2、绑定 事件处理函数
//为姓名文本框 绑定失去焦点 事件处理函数
txtName.onblur=function(){
//this->txtName
//先定义姓名文本框的格式规则
var reg=/^\w{1,10}$/;
//调用共用的vali函数，验证当前文本框
//用外部正确的this替换其中错误的this，同时传入各自不同的reg规则
vali.call(this,reg);//希望this->txtName
//调vali.call(任意表单元素, 任意规则)
}
//因为txtName.onblur中和txtPwd.onblur中包含大量重复的代码
//所以将重复的代码提取出来，定义在一个专门的函数中，共用
//又因为每个文本框验证时的规则不一样
//所以定义一个reg参数，在调用时临时接收各自不同的规则
function vali(reg){
//获得当前文本框自己
var input=this;
//3、查找要修改的元素
//查找当前文本框旁边的div ——<div class="vali_info">6位数字</div>
var div=input.parentNode.nextElementSibling.children[0];
//4、修改元素
//若验证input的内容通过
if(reg.test(input.value)==true){ //reg.test ：复习正则表达式
//给div 穿验证成功的衣服 vali_success
div.className="vali_success";
}else{//否则
//给div 穿验证失败的衣服 vali_fail
div.className="vali_fail";
}
}
txtPwd.onblur=function(){
//this->txtName
//先定义密码框的格式规则
var reg=/^\d{6}$/;
vali.call(this,reg);//希望this->txtPwd
}
</script>
</body>
</html>
/css样式/
table{width:700px}
td:first-child{width:60px}
td:nth-child(2){width:200px}
td:first-child+td{width:200px}
td:last-child{width:340px}
td span{color:red}
.vali_info{ display:none;}
.txt_focus{
border-top:2px solid black;
border-left:2px solid black;
}
.vali_success,.vali_fail{
background-repeat:no-repeat;
background-position:left center;
display:block;
}
.vali_success{
background-image:url("…/images/ok.png");
padding-left:20px;
width:0px;height:20px;
overflow:hidden;
}
.vali_fail{
background-image:url("…/images/err.png");
border:1px solid red;
background-color:#ddd;
color:Red;
padding-left:30px;
}
