<!doctype html> <html> <head> <meta charset="UTF-8"> <title>实现带样式的表单验证 </title> <style> table{width:700px} /*父元素下的第1个，第n个，最后一个td子元素*/td:first-child{width:60px} /*IE不支持nth-child*/td:nth-child(2){width:200px} /*IE*/td:first-child+td{width:200px} /*IE不支持--可以靠总宽度来调节 td:last-child{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;font-size:12px;} /* 验证消息：验证通过时的样式*/ .vali_success{background-image:url("img/ok.png");padding-left:20px;width:0px;height:20px;overflow:hidden;} /* 验证消息：验证失败时的样式*/ .vali_fail{background-image:url("img/warning.png");border:1px solid red;background-color:#ddd;color:Red;padding-left:30px;} </style> </head> <body> <form> <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> window.$=HTMLElement.prototype.$=function(selector){ return (this==window?document:this).querySelectorAll(selector); } var form = document.forms[0]; var txtName =form.elements['userName']; var txtPwd = form.elements['pwd']; txtName.onfocus=txtPwd.onfocus = function(){ this.className="txt_focus"; this.parentNode.parentNode.$('div')[0].removeAttribute('class'); // div.className="" } function valName(){ this.className=""; var div = this.parentNode.parentNode.$('div')[0]; var r=/^w{1,10}$/.test(this.value); div.className = r?"vali_success":"vali_fail"; return r; } function valPwd(){ this.className=""; var div = this.parentNode.parentNode.$('div')[0]; var reg = /^[0-9]{6}$/; var r=reg.test(this.value) div.className = r?"vali_success":"vali_fail"; return r; } txtName.onblur=valName; txtPwd.onblur=valPwd; form.onsubmit = function(){ //都执行完，即使有报错都显示出来 //var r = txtName.onblur()&txtPwd.onblur(); //一个出错后不执行 var r = txtName.onblur()&&txtPwd.onblur(); if(!r){ var e = window.event ||arguments[0]; if(e.preventDefault){ e.preventDefault(); }else { e.returnValue=false; } }else { window.open('http://www.baidu.com') } } </script> </body> </html>
