登录验证+bootStrap+jQuery+封装 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> 
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
    <script src="../node_modules/jquery/dist/jquery.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
</head>
<body>
<div class="col-xs-4 col-xs-offset-4">
    <form class="form-horizontal">
        <div class="form-group   has-feedback">
            <label for="user" class="control-label col-xs-3">user:</label>
            <div class="col-xs-9"><input type="text" id="user" class="form-control"><span class="glyphicon  form-control-feedback"></span></div>
        </div>
        <div class="form-group has-feedback">
            <label for="password" class="control-label col-xs-3">password:</label>
            <div class="col-xs-9"><input type="password" id="password" class="form-control"><span class="glyphicon  form-control-feedback"></span></div>
        </div>
        <div class="form-group has-feedback">
            <label for="tel" class="control-label col-xs-3">tel:</label>
            <div class="col-xs-9"><input type="text" id="tel" class="form-control"><span class="glyphicon  form-control-feedback"></span></div>
        </div>
        <div class="row">
            <div class="col-xs-2 col-xs-offset-3"><button type="submit" class="btn btn-primary">提交</button></div>
            <div class="col-xs-2 col-xs-offset-3"><button type="button" class="btn btn-default">注册</button></div>
        </div>
    </form>
</div> 
<script>
    // 封装
    (function (){
        $.fn.verify=function(){
            // 判断数组里是否包含这个id,方法一:includes是包含的意思
            // this.prop("id")是元素的id 
            // prop是属性的意思
            // if(!(["user","password"].includes(this.prop("id")))) return ;
            // 判断数组里是否包含这个id,方法二 :indexOf 查找元素，<0即查找不到
               if(["user","password","tel"].indexOf(this.prop("id"))<0) return ;
            //    监听事件，等同于input.addEventListener
            // 是一个函数，里面也会用到input，所以写成一个箭头函数
            //    this.input(function (e){

            //    })
            // function 什么    变成    什么=>          

            // this.input(e=>{
            //     // 给当前元素绑定一个id
            //   if(this.data("ids")) return;
            //   var ids=setTimeout(()=>{    
            //     clearTimeout(this.data("ids"));
            //     this.data("ids",false);
            //     console.log(this.value);
            //   },500)
            // })
            // this.data("ids",ids);

             // 不支持上面的input简写事件，所以换成this.on
             this.on("input",e=>{
                // 给当前元素绑定一个id
              if(this.data("ids")) return;
              var ids=setTimeout(()=>{    
                clearTimeout(this.data("ids"));
                this.data("ids",false);
                // console.log(this.val());
                if(verifyReg(this.prop("id"),this.val())){
                    // console.log("验证成功！")
                    this.next("span")
                         .removeClass("glyphicon-remove")
                         .addClass("glyphicon-ok")
                         .parents(".has-feedback")
                         .removeClass("has-error")
                         .addClass("has-success")
                }else{
                     this.next("span")
                        .removeClass("glyphicon-ok")
                        .addClass("glyphicon-remove")
                        .parents(".has-feedback")
                        .removeClass("has-success")
                        .addClass("has-error")
                }
              },500)
              this.data("ids",ids);
            })
        };
            
            // 判断内容是否正确
            function verifyReg (id,text){
                switch(id){
                    case "user":
                        return /^\w{8,16}$/.test(text);
                    case "password":
                        return  /^(?=\D+\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,16}$/.test(text);
                    case "tel":
                        return  /^1\d{10}$/.test(text);
                }
            }  
    })();
    //$是全局的$
    // 执行验证
    $("#user").verify();
    $("#password").verify();
    $("#tel").verify();
</script>
</body>
</html>

上面代码为全部思路过程且包含注释信息，很乱，下面进行详解

页面使用bootStrap进行布局

封装如下：放入jQuery里面

(function () {
        $.fn.verify=function () {
            var arr=["user","password","tel"];
            if(arr.indexOf(this.prop("id"))<0)return;
            this.on("input",e=>{
                if(this.data("ids"))return;
                var ids=setTimeout(()=>{
                    clearTimeout(this.data("ids"));
                    this.data("ids",false);
                    if(verifyReg(this.prop("id"),this.val())){
                        this.next("span")
                            .removeClass("glyphicon-remove")
                            .addClass("glyphicon-ok")
                            .parents(".has-feedback")
                            .removeClass("has-error")
                            .addClass("has-success")
                    }else{
                        this.next("span")
                            .removeClass("glyphicon-ok")
                            .addClass("glyphicon-remove")
                            .parents(".has-feedback")
                            .removeClass("has-success")
                            .addClass("has-error")
                    }
                },500);
                this.data("ids",ids);
            })
        };

        function verifyReg(id,text) {
            switch (id) {
                case "user":
                    return /^\w{8,16}$/.test(text);
                case "password":
                    return  /^(?=\D+\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,16}$/.test(text);
                case "tel":
                    return  /^1\d{10}$/.test(text);
            }
        }
    })();

用的时候只需要调用

    $("#user").verify();
    $("#password").verify();
    $("#tel").verify();

就可以实现了。

posted @ 2020-05-09 01:15  我是乐呀  阅读(339)  评论(0)    收藏  举报