jQuery validata插件實現(xiàn)方法

更新時間：2017年06月25日 12:02:52 投稿：jingxian

下面小編就為大家?guī)硪黄猨Query validata插件實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

大家好，第一次寫有點正規(guī)的博客，以前都是隨手復制幾下。為了打LOL,我寫快點，代碼我都復制在最下面了，并且寫了大量的注釋。

首先我寫jquery插件，喜歡這么寫（好處有很多，以后在講，哈哈，看過jQuery源碼應該知道）：

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

factory(root.jQuery,plug)

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

/*

在這里寫邏輯

一：默認的參數(shù) var __dEFAULTS__，

二：規(guī)則（可根據(jù)業(yè)務需求自己配置） var __RULES__，

三：原型 var __PROTOTYPE__，

_init: 初始化DOM結構，沒什么將的,

_attachEvent: 自定義的事件的機制（其實就是用了jquery的trigger）

_bind: 首先是事件功能的綁定，為每一個input都綁定事件,each循環(huán)__RULES__（就是規(guī)則），找到所以自定義data的值（也就是每一個input中所需要的規(guī)則校驗），用if來判斷，當前的input中配置了幾個data屬性，并且通過 rule.call(_$field)（這句話的意思就是調用rule函數(shù)的時候，rule函數(shù)里的this引用變成了_$field），把input中的rule規(guī)則判斷一下。如果為false，那么就在input的父元素下面添加一個p標簽，那么怎么讓p標簽中的內(nèi)容讓用戶來配置呢？<p class='message'>"+(_$field.data(key+"-message")||_$this.errorMessage)+"</p>，這其中的意思是如果錯了，那么就不往下檢索rule了，直接return result（因為rule返回為false,所以這里的result也為false），來阻止。并且添加p標簽，并且根據(jù)result的值來判斷input的父元素,來個父元素加上一個success或error。最后還有submit方法：這個方法是用來通過input父元素的class中有沒有error，來判斷觸發(fā)哪一個自定義事件

四：$.fn[plug]

一：首先判斷當前元素是否是from標簽，不是的話，throw一個錯誤

二：$.extend(this,__dEFAULTS__,options,__PROTOTYPE__); (....貌似有同學面試死在這個上面了，有空講一下吧)

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

五：根據(jù)業(yè)務需求，用戶自定義添加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) {
    //默認參數(shù)
    var __dEFAULTS__ = {
      triggerEvent: "keyup",
      errorMessage: "You entered a wrong"
    };
    /*
    require(需求) 必填項
    regex（正則表達式）正則驗證
    length 長度驗證
    minlength 最短的長度
    maxlength 最長的長度
    between 兩者之間的長度
    equalto 和xxx相同
    greaterThan 大于
    lessThan 小于
    middle 兩者之間的數(shù)字
    integer 整數(shù)
    number 必須是數(shù)字
    email 郵箱地址
    mobile 電話號碼
    phone 手機號碼
    uri 有效的統(tǒng)一資源標識符
    cardId 身份證號碼
    bankId 銀行卡號碼
    ....其他的規(guī)則（根據(jù)業(yè)務規(guī)則來）
    */
    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]);
      }, // 兩者之間的數(shù)字
      integer: function() {
        return /^\-?[0-9]*[1-9][0-9]*$/.test(this.val());
      }, // 整數(shù)
      number: function() {
        return !isNaN(Number(this.val()));
      }, // 必須是數(shù)字
      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());
      }, // 有效的統(tǒng)一資源標識符
      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)
      },
      //自定義事件的觸發(fā)機制
      _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) {    //根據(jù)業(yè)務需求增加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="用戶應該是由字母數(shù)字下劃線所組成" 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="密碼應該是由字母數(shù)組所組成" 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插件實現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

jquery表單驗證需要做些什么
jquery表單驗證需要做些什么，大家知道嗎？其實很簡單只要做四件事情就可以順利完成表單驗證，想知道哪四件事情嗎，請仔細閱讀下文。
2015-11-11
JQuery實現(xiàn)簡單時尚快捷的氣泡提示插件
在程序提交后，為了提高用戶體驗我們需要驗證并提示出錯的位置，利用JQuery我們可以輕松實現(xiàn)氣泡提示，需要的朋友可以了解下
2012-12-12
jQuery插件FusionCharts繪制的3D環(huán)餅圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制的3D環(huán)餅圖效果,結合完整實例形式分析了jQuery使用FusionCharts載入xml格式數(shù)據(jù)繪制圖形的操作步驟與相關實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-04-04
jQuery實現(xiàn)每日秒殺商品倒計時功能
這篇文章主要介紹了 jQuery實現(xiàn)每日秒殺商品倒計時功能,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-09-09
利用jQuery的動畫函數(shù)animate實現(xiàn)豌豆發(fā)射效果
本文主要講解jQuery的animate函數(shù)的基本用法，利用動畫函數(shù)animate實現(xiàn)豌豆發(fā)射的效果，對于學習animate很有幫助，有需要的可以參考借鑒。
2016-08-08
jQuery實現(xiàn)鼠標移到某個對象時彈出顯示層功能
這篇文章主要介紹了jQuery實現(xiàn)鼠標移到某個對象時彈出顯示層功能,涉及jQuery基于事件響應動態(tài)操作頁面元素屬性相關實現(xiàn)技巧,需要的朋友可以參考下
2018-08-08
jquery實現(xiàn)自定義樹形表格的方法【自定義樹形結構table】
這篇文章主要介紹了jquery實現(xiàn)自定義樹形表格的方法,結合實例形式分析了jQuery創(chuàng)建自定義樹形結構table的相關操作技巧,需要的朋友可以參考下
2019-07-07
JQury slideToggle閃爍問題及解決辦法
在使用slideToggle 的時候經(jīng)常會遇到列表收起時候閃爍的問題,一般IE瀏覽器會有這個問題，其他瀏覽器比如火狐不會出現(xiàn)閃爍.
2011-07-07
淺談jQuery添加的HTML,JS失效的問題
下面小編就為大家?guī)硪黄獪\談jQuery添加的HTML,JS失效的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-10-10
淺談jquery采用attr修改form表單enctype不起作用的問題
下面小編就為大家?guī)硪黄獪\談jquery采用attr修改form表單enctype不起作用的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11