表单验证案列

最新推荐文章于 2020-05-05 15:21:18 发布

积跬致千

最新推荐文章于 2020-05-05 15:21:18 发布

阅读量309

点赞数

CC 4.0 BY-SA版权

分类专栏： Dom 文章标签： dom

本文链接：https://blog.youkuaiyun.com/web_zhouliang/article/details/70214064

Dom 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种结合样式展示的表单验证方法，通过JavaScript实现对表单输入的实时检查，确保用户输入符合预设规则。包括对用户名（字母、数字、下划线组成，长度不超过10个字符）及密码（6位纯数字）的验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>