jquery实现简易验证插件封装

本文实例为大家分享了封装jquery简易验证插件的具体代码,供大家参考,具体内容如下

html代码:




 
 jQuery数据校验插件开发
 
 


 

css部分

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
ul li {
  list-style: none;
  position: relative;
}
input {
  outline: 0;
}
.format-input {
  display: inline-block;
  width: 84%;
  height: 35px;
  padding: 0 0 0 3px;
  border: 1px solid #fff;
  vertical-align: baseline;
}
:focus {
  outline: 4px solid #007fff;
}
html,
body {
  width: 100%;
  height: 100%;
}
body {
  min-height: 100%;
  font: 12px/1.5 'Microsoft YaHei', arial, sans-serif;
  background: url(../image/bj.jpg) no-repeat;
  background-size: cover;
  overflow: hidden;
}
.register-wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 450px;
  height: 415px;
  margin: auto;
  background: rgba(0, 0, 0, 0.5);
}
.register {
  width: 100%;
  height: 100%;
  padding: 20px 30px;
  color: #fff;
}
.register > ul > li {
  font-size: 0;
  margin: 0 0 20px 0;
}
.register > ul > li label {
  display: inline-block;
  width: 16%;
  font-size: 12px;
}
.submit-btn {
  border: 1px solid transparent;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background: #51a8ff;
  box-shadow: 1px 1px #AFC4EA,
               2px 2px #AFC4EA,
               3px 3px #AFC4EA;
}
.submit-btn:hover {
  cursor: pointer;
}
.submit-btn:focus {
  outline: none;
  border: 1px solid #f0f3f9;
}
.submit-btn:active {
  border: 1px solid #f0f3f9;
  transform: translate(1px, 1px);
  box-shadow: 1px 1px #AFC4EA,
                  2px 2px #AFC4EA;
 
}
 
提示错误的tips样式:
 
.validate-error-tip {
  position: absolute;
  top: 0;
  left: 0;
  display: table;
  min-width: 150px;
  min-height: 35px;
  font-size: 12px;
  border: 1px solid lightblue;
  padding: 5px;
  background: #fff;
  color: #666;
  z-index: 9999;
}
.validate-error-tip:before {
  position: absolute;
  top: 0;
  left: -15px;
  display: block;
  content: '';
  width: 0;
  height: 0;
  border-color: transparent lightblue transparent transparent;
  /*1、下边框有颜色 对应着上边框没有宽度,是正三角形;2、上边框有颜色 对应着下边框没宽度,是倒三角形*/
  border-style: solid;
  border-width: 15px 15px 15px 0;
}
javascript部分:

(function($, factory, pluginName) {
 
   factory($, pluginName);
 
})(jQuery, function($, pluginName){
 
   //插件默认配置项
   var __DEFAULT__ = {
 
      //默认触发验证的事件为input事件
      initEvent: 'input',
      prefix: 'vt' //自定义属性前缀
   };
 
   //插件内部编写校验规则
    var __RULES__ = {
 
      //正则
      regexp: function(ruleData) {
         return new RegExp(ruleData).test(this.val());
      },
 
      //必填项
      required: function(ruleData) {
         return $.trim(this.val()).length > 0;
      },
 
      //最小值
      minLength: function(ruleData) {
         return $.trim(this.val()).length > ruleData ;
      },
 
      //最大值
      maxLength: function(ruleData) {
         return $.trim(this.val()).length < ruleData;
      },
 
      //验证两次密码是否一致
      isEquals: function(ruleData) {
         var pwd = $(':password').eq(0); //$(':password')[0]是什么对象呢?
         return pwd.val() === this.val();
      },
 
      //是否是邮箱
      isEmail: function(ruleData) {
         return /\w+@\w+\..+/g.test(this.val());
      },
 
      //是不是手机号
      isPhone: function(ruleData) {
         return /^1\d{10}$/g.test(this.val());
      },
 
      //是不是座机号码
      isTel: function(ruleData) {
         return /^0\d{2,3}-\d{7,8}$/g.test(this.val());
      }
    };
 
    $.fn[pluginName] = function(options) {
 
       //标识是否提交表单
       var $this = this;
 
       if(!$this.is('form')) { return; }
 
       //this: 这里的this是jQuery实例对象
        $this.$file = $this.find('input:not([type="button"][type="submit"])'); //给当前实例对象(也就是调用该插件的jquery对象)添加一个$file的属性
 
        $.extend($this, __DEFAULT__, options); //以默认配置为优先,以用户配置为覆盖
 
        //格式化rule规则。
        // 将一个字符串在每一个大写字母前加上一个'-',并且全部转为小写
        // vtEmailMsg > vt-email-msg
        $this.formatRule = function(str, connector) {
 
            if(typeof str !== 'string') {
                return str;
            }
 
            //使用replace、正则(匹配单个大写字母)
            str = str.replace(/[A-Z]/g,function(match, index) {
                if(index === 0) { return match.toLowerCase() }
                return connector + match.toLowerCase();
            });
            return str;
        };
 
        //显示错误信息
        $this.showErrorTip = function(errorMsg) {
            var $tip = $("

"),
                offset = this.position(),
                elHeight = this.outerHeight(),
                elWidth = this.outerWidth();
 
            if(this.siblings('.validate-error-tip').length > 0){
                this.siblings('.validate-error-tip').eq(0).text(errorMsg).show();
            } else {
                $tip.text(errorMsg).
                    css({
                        top: offset.top,
                        left: offset.left + elWidth + 15,
                        width: $tip.width()
                    });
                this.after($tip);
                $tip.show();
            }
        };
 
        //监听form表单里所有的input的事件
        $this.$file.on(this.initEvent, function(){
 
           var $input = $(this);
 
           //清除错误提示框
            $input.siblings('.validate-error-tip').remove();
 
           //注意这里是循环的我们插件的规则,而不是用户拥有的规则
           $.each(__RULES__, function(key, fn) {
               var rule = '',
                   errorMsg = '';
 
               //如果key是以is字符开头、则去掉is
               if(key.indexOf('is') === 0) {
                   key = key.slice(2);
               }
 
               key = $this.formatRule(key, '-'); //将规则格式化为html中书写的形式
               rule = $input.data(__DEFAULT__.prefix + '-' + key); //获取规则的值
               errorMsg = $input.data(__DEFAULT__.prefix + '-' + key + '-msg'); //规则对应的提示信息
 
               //如果当前input有这个规则,则执行这个规则
               if(rule) {
 
                  //执行规则测试是否通过
                  var isPassed = fn.call($input, rule); //改变规则函数fn执行时候的this,指向当前input jquery对象
 
                  if(!isPassed) {
                     //未通过、则错误提示
                      $this.showErrorTip.call($input, errorMsg);
                  }
               }
           });
        });
 
        //绑定提交表单的事件
        this.on('submit', function(e) {
            var isFormPassed = true;
 
            $this.$file.trigger($this.initEvent);
 
            $this.$file.each(function(index, current){
                var $current = $(current);
 
                if($current.siblings('.validate-error-tip').is(':visible')){
                    isFormPassed = false;
                    return false;
                }
 
            });
 
            if(!isFormPassed) {
                return isFormPassed;
            }
        });
    };
 
    //扩展新的验证规则(实际上就是扩展上面__RULES__对象)
    $.fn[pluginName].addRule = function(options) {
 
       $.extend(__RULES__, options);
    }
}, 'formValidate');

jquery实现简易验证插件封装_第1张图片

更多内容请参考《jquery表单验证大全》 ,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的:(jquery实现简易验证插件封装)