jQuery validata插件实现方法


Posted in jQuery onJune 25, 2017

大家好,第一次写有点正规的博客,以前都是随手复制几下。为了打LOL,我写快点,代码我都复制在最下面了,并且写了大量的注释。

首先我写jquery插件,喜欢这么写(好处有很多,以后在讲,哈哈,看过jQuery源码应该知道):

(function(root,factory,plug,undefined){

factory(root.jQuery,plug)

})(window,function($,plug){

/*

在这里写逻辑

一:默认的参数 var __dEFAULTS__,

二:规则(可根据业务需求自己配置) var __RULES__,

三:原型 var __PROTOTYPE__,

_init: 初始化DOM结构,没什么将的,

_attachEvent: 自定义的事件的机制(其实就是用了jquery的trigger)

_bind: 首先是事件功能的绑定,为每一个input都绑定事件,each循环__RULES__(就是规则),找到所以自定义data的值(也就是每一个input中所需要的规则校验),用if来判断,当前的input中配置了几个data属性,并且通过 rule.call(_$field)(这句话的意思就是调用rule函数的时候,rule函数里的this引用变成了_$field),把input中的rule规则判断一下。如果为false,那么就在input的父元素下面添加一个p标签,那么怎么让p标签中的内容让用户来配置呢?<p class='message'>"+(_$field.data(key+"-message")||_$this.errorMessage)+"</p>,这其中的意思是如果错了,那么就不往下检索rule了,直接return result(因为rule返回为false,所以这里的result也为false),来阻止。并且添加p标签,并且根据result的值来判断input的父元素,来个父元素加上一个success或error。最后还有submit方法:这个方法是用来通过input父元素的class中有没有error,来判断触发哪一个自定义事件

四:$.fn[plug]

一:首先判断当前元素是否是from标签,不是的话,throw一个错误

二:$.extend(this,__dEFAULTS__,options,__PROTOTYPE__); (....貌似有同学面试死在这个上面了,有空讲一下吧)

三:this._init(); this._bind(); return this;

五:根据业务需求,用户自定义添加rule:就是如下添加一个方法,就可以了,(下次有时间还是讲一下extend吧)

$.fn[plug].extendRules = function(news){
$.extend(__RULES__,news);
}

六:ajax

function login() {
    var username = $('#username').val(),
      password = $('#password').val();
    var data = {
      "uname": username,
      "upwd": password
    };
    $.ajax({
      url: '/login',
      type: 'POST',
      data: data,
      success: function(data, status) {
        if (status == 'success') {
          location.href = 'home';
        }
      },
      error: function(data, status) {
        if (status == "error") {
          location.href = 'login'
        }
      }
    });
  }

JS:

;
  (function(root, factory, plug, undefined) {
    factory(root.jQuery, plug);
  })(window, function($, plug) {
    //默认参数
    var __dEFAULTS__ = {
      triggerEvent: "keyup",
      errorMessage: "You entered a wrong"
    };
    /*
    require(需求) 必填项
    regex(正则表达式)正则验证
    length 长度验证
    minlength 最短的长度
    maxlength 最长的长度
    between 两者之间的长度
    equalto 和xxx相同
    greaterThan 大于
    lessThan 小于
    middle 两者之间的数字
    integer 整数
    number 必须是数字
    email 邮箱地址
    mobile 电话号码
    phone 手机号码
    uri 有效的统一资源标识符
    cardId 身份证号码
    bankId 银行卡号码
    ....其他的规则(根据业务规则来)
    */
    var __RULES__ = {
      require: function() {
        return this.val() != "";
      }, //(需求) 必填项
      regex: function() {
        return new RegExp(this.data("regex")).test(this.val());
      }, //(正则表达式)正则验证
      length: function() {
        return this.val().length == Number(this.data("length"));
      }, // 长度验证
      minlength: function() {
        return this.val().length >= Number(this.data("minlength"));
      }, // 最短的长度
      maxlength: function() {
        return this.val().length <= Number(this.data("maxlength"));
      }, // 最长的长度
      between: function() {
        var length = this.val().length;
        var between = this.data("between").split("-");
        return length >= Number(between[0]) && length <= Number(between[1]);
      }, // 两者之间的长度
      equalto: function() {
        if ($(this.data("equalto")).val() === this.val()) {
          $(this.data("equalto")).parent(".mf-line").removeClass('error').addClass('success').next("p").remove();
          return true;
        }
        return false;
      }, // 和xxx相同
      greaterthan: function() {
        return this.val() > Number(this.data("greaterthan"));
      }, // 大于
      lessthan: function() {
        return this.val() < Number(this.data("lessthan"));
      }, // 小于
      middle: function() {
        var length = this.val();
        var middle = this.data("middle").split("-");
        return length >= Number(middle[0]) && length <= Number(middle[1]);
      }, // 两者之间的数字
      integer: function() {
        return /^\-?[0-9]*[1-9][0-9]*$/.test(this.val());
      }, // 整数
      number: function() {
        return !isNaN(Number(this.val()));
      }, // 必须是数字
      email: function() {
        return /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(this.val());
      }, // 邮箱地址
      mobile: function() {
        return /^1\d{10}$/.test(this.val());
      }, // 电话号码
      phone: function() {
        return /^\d{4}\-\d{8}$/.test(this.val());
      }, // 手机号码
      uri: function() {
        return /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/g.test(this.val());
      }, // 有效的统一资源标识符
      amount: function() { //金额
        if (!this.val()) return true;
        return /^([1-9][\d]{0,}|0)(\.[\d]{1,2})?$/.test(this.val());
      }
    };
    var __PROTOTYPE__ = {
      //初始化dom结构
      _init: function() {
        this.$fields = this.find(".mf-line .mf-txt:visible"); //选择可见的input(过滤掉display: none)
      },
      //自定义事件的触发机制
      _attachEvent: function(event, args) {
        this.trigger(event, args);
      },
      //事件
      _bind: function() {
        var _$this = this;
        //事件功能绑定
        this.$fields.on(this.triggerEvent, function() {
          var _$field = $(this); //需要验证的表单
          var $group = _$field.parents(".mf-line"); //拿到input的div
          var result = true;
          $group.next("p").remove();
          $.each(__RULES__, function(key, rule) {
            if (_$field.data(key)) {
              result = rule.call(_$field);
              (!result) && $group.after("<p class='message'>" + (_$field.data(key + "-message") || _$this.errorMessage) + "</p>");
              return result;
            }
          })
          $group.removeClass('error success').addClass(result ? 'success' : 'error');
        })
        this.on("submit", function() {
          var $groups = _$this.$fields.trigger(_$this.triggerEvent).parents(".mf-line");
          if ($groups.filter(".error").length > 0) {
            _$this._attachEvent("error", {});
          } else {
            _$this._attachEvent("success", {});
          }
          return false;
        })
      }
    }
    $.fn[plug] = function(options) {
      //判断this是否是form标签
      if (!this.is("form")) {
        throw new Error("the trgger is not form tag");
      }
      $.fn.extend(this, __dEFAULTS__, options, __PROTOTYPE__);
      this._init();
      this._bind();
      return this;
    }
    $.fn[plug].extendRules = function(news) {    //根据业务需求增加rule
      $.extend(__RULES__, news);
    }
  }, "validator");



  //这是调用插件的js

  $(function() {
    $.fn.validator.extendRules({
      cardid: function() {
        return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.val());
      }
    })
    $(".member-forms").validator({
        triggerEvent: "blur"
      })
      .on("error", function(event, $errFiles) {
        return false;
      })
      .on("success", function(event) {
        this.submit();
        return false;
      });
  });

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>validata</title>
  <link rel="stylesheet" type="text/css" href="css/validata.css" rel="external nofollow" />
</head>

<body>
  <div class="wrapper mt30">
    <form action="##" class="member-forms" method="get">
      <div class="mf-head rel tc">
        <span class="f24">用户登录</span>
      </div>
      <div class="mf-line">
        <span class="mf-name">帐号:</span>
        <input type="text" class="mf-txt" id="username" placeholder="请输入用户名/手机号" data-require="true" data-require-message="用户名必须填写" data-regex="^\w+$" data-regex-message="用户应该是由字母数字下划线所组成" data-between="6-12" data-between-message="用户名长度必须是在6-12位字符之间" />
      </div>
      <div class="mf-line">
        <span class="mf-name">密码:</span>
        <input type="password" class="mf-txt" id="password" placeholder="请输入密码" data-require="true" data-require-message="密码必须填写" data-regex="^[a-zA-Z0-9]+$" data-regex-message="密码应该是由字母数组所组成" data-minlength="8" data-minlength-message="密码长度最少8位" data-maxlength="12" data-maxlength-message="密码长度最多12位" />
      </div>
      <input type="submit" class="mf-btn mt30" id="loginBtn" />
    </form>
  </div>
  <script type="text/javascript" src="../jquery-2.2.4.js"></script>
  <script type="text/javascript" src="plug_in/validata.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
</body>

</html>

css:

<style type="text/css">
  body,
  html {
    width: 100%;
    height: 100%;
    font-family: "Microsoft yahei";
  }
  
  * {
    margin: 0;
    padding: 0;
  }
  
  .tc {
    text-align: center;
  }
  
  .f24 {
    font-size: 24px;
  }
  
  .rel {
    position: relative;
  }
  
  .wrapper {
    max-width: 1186px;
  }
  
  .mt30 {
    margin-top: 30px;
  }
  
  .member-forms {
    max-width: 400px;
    margin: 20px auto;
    padding: 0 10px;
    background-color: #fff;
  }
  
  .member-forms .mf-line {
    margin-top: 30px;
    border: 1px solid #ddd;
    line-height: 52px;
    position: relative;
    padding-left: 110px;
    border-radius: 4px;
  }
  
  .member-forms .mf-line.error {
    border: 1px solid #a94442;
  }
  
  .member-forms .mf-line.success {
    border: 1px solid #3c763d;
  }
  
  .member-forms .mf-line .mf-name {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    width: 110px;
  }
  
  .member-forms .mf-line .mf-txt {
    display: block;
    height: 50px;
    width: 96%;
    border: 0px;
    padding: 0 2%;
  }
  
  .member-forms .message {
    width: 400px;
    font-size: 12px;
    color: red;
  }
  
  .member-forms .mf-btn {
    height: 52px;
    line-height: 52px;
    color: #fff;
    background-color: #5ba0e5;
    width: 100%;
    text-align: center;
    cursor: pointer;
    font-size: 18px;
    border: 0px;
  }
  </style>

以上这篇jQuery validata插件实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 #jQuery
jquery图片放大镜效果
Jun 23 #jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 #jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 #jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 #jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 #jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 #jQuery
You might like
PHP 常用函数库和一些实用小技巧
2009/01/01 PHP
PHP中isset与array_key_exists的区别实例分析
2015/06/02 PHP
PHP判断是否连接上网络的方法
2015/07/01 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
php获取文件后缀的9种方法
2016/03/22 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
JS处理VBArray的函数使用说明
2008/05/11 Javascript
jQuery $.get 的妙用 访问本地文本文件
2012/07/12 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
js 窗口抖动示例
2013/09/04 Javascript
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
Javascript的表单验证-提交表单
2016/03/18 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
nodejs判断文件、文件夹是否存在及删除的方法
2017/11/10 NodeJs
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
[52:39]完美世界DOTA2联赛PWL S3 CPG vs Forest 第一场 12.16
2020/12/17 DOTA
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
Python实现统计单词出现的个数
2015/05/28 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
对Python中小整数对象池和大整数对象池的使用详解
2019/07/09 Python
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
马来西亚奢侈品牌购物商城:Valiram 247
2020/09/29 全球购物
软件测试有哪些?什么是配置项?
2012/02/12 面试题
党委书记岗位职责
2013/11/24 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
网络优化专员求职信
2014/05/04 职场文书