数据检验插件

最新推荐文章于 2021-07-28 22:26:06 发布

Mr航

最新推荐文章于 2021-07-28 22:26:06 发布

阅读量1k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_28473733/article/details/85915120

版权

js 专栏收录该内容

84 篇文章 1 订阅

订阅专栏

1、html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据校验开发</title>
    <style type="text/css">
        *{margin:0; padding:0; font-family: "微软雅黑";}
        .box{width:800px; border:1px solid #ddd; margin:50px auto 0; padding:30px;}
    </style>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
<div class="box">
    <form class="data">
        <div class="form-group">
            <label for="exampleInputEmail1">邮箱</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入合法邮箱"
                data-dr-regexp="^\w+@\w+\.\w+$"
                data-dr-regexp-message='请输入正确的邮箱'
                data-dr-require=true
                data-dr-require-message='邮箱不能为空'
            >
        </div>

        <div class="form-group">
            <label for="exampleInputPassword1">手机号码</label>
            <input type="text" class="form-control" id="exampleInputPassword1" placeholder="请输入合法手机号码"
                   data-dr-regexp="^1\d{10}$"
                   data-dr-regexp-message="请输入正确的手机号码"
                   data-dr-require=true
                   data-dr-require-message="手机号码不能为空"
            >
        </div>

        <div class="form-group">
            <label for="exampleInputPassword1">密码</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入有效密码"
                   data-dr-regexp="^\w+$"
                   data-dr-regexp-message="密码不合法(由字母数字下划线组成)"
                   data-dr-require=true
                   data-dr-require-message="密码不能为空"
                   data-dr-min-length=6
                   data-dr-min-length-message="密码最少为6位字符串"
                   data-dr-max-length=10
                   data-dr-max-length-message="密码最多为10位字符串"
            >
        </div>

        <div class="form-group">
            <label for="exampleInputPassword1">确认密码</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入有效密码"
                   data-dr-require=true
                   data-dr-require-message="密码不能为空"
                   data-dr-confirm=true
                   data-dr-confirm-message="两次密码输入不一致"
            >

        </div>

        <div class="form-group">
            <label for="exampleInputPassword1">座机号码</label>
            <input type="text" class="form-control" id="exampleInputPassword1" placeholder="请输入有效座机号码"
                   data-dr-regexp="^0\d{2,3}-\d{7,8}$"
                   data-dr-regexp-message="座机号码输入不合法区号-座机号"
                   data-dr-require=true
                   data-dr-require-message="座机号码不能为空"
            >
        </div>
        <button type="submit" class="btn btn-default">注册</button>
    </form>
</div>
<script type="text/javascript" src="js/jquery-2.2.4.js"></script>
<script type="text/javascript" src="js/dataResult.js"></script>
<script type="text/javascript">

//独立插件
//依赖插件
     //1:引用jquery
    //2:暴露接口
//独立插件
/*(function (window,factory) {
    var vue = factory();
    window.Vue = vue;
})(this,function () {
    var Vue = function () {

    };
    return Vue;
});*/

//依赖插件 Jquery.prototye.xxxx
//硬编码 变成配置 指令 自定义属性 data-xxxx 插件的配置 data-dr-xxxx
    //data-dr-regexp 正则
    //data-dr-required 不能为空
    //data-dr-min-length 字符长度最小范围
    //data-dr-max-length 字符长度最大范围
    //data-dr-confirm 确认
//扩展

//数据检验
$('form').dataResult();
//用户扩展
jQuery.prototype.dataResult.extendResult({
    "max-length":function (data) {
        return this.val().length <= data
    }
})
</script>

</body>
</html>

2、js封装部分

(function (window,factory,plug) {
    factory(jQuery,plug);
})(this,function (jQuery,plug) {
   //jQuery.prototype  $.fn
    //添加默认配置
    var _DEFAULT = {
        initEvent:"input",
        plug:'dr'
    };
    //插件内部检验规则
    var  _RULAS_ = {
        "regexp":function(data){
            return new RegExp(data).test(this.val())
        },
        "require":function(data){
            return this.val();
        },
        "min-length":function(data){
            return this.val().length >= data
        },
        "confirm":function(data){
            var passElement = $(':password')[0];
            if (passElement.value == '' || passElement.value != this.val()) {
                return false
            }else {
                return true
            }
        }

    };
    //option用户传进来的自定义配置
    $.fn[plug] = function (option) {
        //以默认配置为优先，用户配置为覆盖
        $.extend(this,_DEFAULT,option);
        //获取form表单，当前this指向form
        this.$file = this.find('input'); //获取所有input元素，绑定事件
        this.$file.on(this.initEvent,function () {
            var _this = $(this);
            //当前this指向触发事件的input
            //如果已经存在p标签，则删掉
            _this.siblings('p').remove();
            //循环查看检验规则与自定义的属性是否比配
            $.each(_RULAS_,function (key,fn) {
                var $filename = _this.data(_DEFAULT.plug+'-'+key);
                var $filenamemessage = _this.data(_DEFAULT.plug+'-'+key+'-message');
                //过滤掉没有写检验规则的自定义属性
                if($filename){
                    //将this指针指向当前的input，这样容易操作input
                    var result = fn.call(_this,$filename); //获取到的结果进行检验输出
                    if(!result){
                        _this.after('<p style="color: red">'+$filenamemessage+'</p>')
                    }
                }
            });
        });
        //点击注册进行拦截
        var $this = this;
        //表单提交验证
        this.on('submit',function () {
            //触发每个input进行事件调用
            $this.$file.trigger($this.initEvent);
            return false
        })
    };

    //用户扩展
    $.fn[plug].extendResult = function (option) {
        $.extend(_RULAS_,option);
    };

},'dataResult');

Mr航

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
数据检验插件

1、html部分&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;数据校验开发&lt;/title&gt; &lt;style type="text/css"&
复制链接

扫一扫