表单验证案列

来源：互联网发布：淘宝墙上挂的饰品编辑：程序博客网时间：2024/06/05 03:42
<!doctype html><html> <head>   <meta charset="UTF-8">   <title>实现带样式的表单验证</title>   <link rel="Stylesheet" href="css/3_2.css" />   <script>window.$=HTMLElement.prototype.$=function(selector){    return (this==window?document:this).querySelectorAll(selector);}/*当文本框获得焦点时 给当前文本框穿txt_focus 同时找到旁边div，脱掉衣服 */window.onload=function(){    //找到第一个form对象    var form=document.forms[0];    //找到姓名和密码文本框    var txtName=form.elements[0/*"userName"*/];    var txtPwd=form.elements[1/*"pwd"*/];    /*为form绑定提交事件*/    form.onsubmit=function(){        //依次调用每个文本框的验证方法        var r=true;        r=txtName.onblur()&&txtPwd.onblur();        if(!r){            var e=window.event||arguments[0];            if(e.preventDefault){                e.preventDefault()//DOM            }else{                e.returnValue=false//IE8            }        }    }    //为两个文本框对象    txtName.onfocus=txtPwd.onfocus=function(){        this.className="txt_focus";        this.parentNode.parentNode.$("div")[0].removeAttribute("class");    }    txtName.onblur=valiName;    txtPwd.onblur=valiPwd;}function valiName(){//专门验证姓名文本框的方法    //当前文本框对象脱衣服    this.className="";    var div=this.parentNode.parentNode.$("div")[0];    //使用正则表达式验证当前文本框的内容是否正确    var r=/^\w{1,10}$/.test(this.value);    // 如果正确，给div穿vali_success    //          否则穿vali_fail    div.className=r?"vali_success":"vali_fail";    //返回正则表达式的验证结果    return r;}function valiPwd(){//专门验证密码文本框的方法    //当前文本框对象脱衣服    this.className="";    var div=this.parentNode.parentNode.$("div")[0];    //使用正则表达式验证当前文本框的内容是否正确    var r=/^\d{6}$/.test(this.value);    // 如果正确，给div穿vali_success    //          否则穿vali_fail    div.className=r?"vali_success":"vali_fail";    //返回正则表达式的验证结果    return r;}
</script> </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="userPwd"/>               <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> </body></html>
0 0