Detailed explanation of jQuery validata plug-in example

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

factory(root.jQuery,plug)

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

/*

$.fn[plug].extendRules = function(news){

$.extend(__RULES__,news);

}

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'

        }

      }

    });

  }

;

  (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的p

          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=&#39;message&#39;>" + (_$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;

      });

  });

<!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>

  <p class="wrapper mt30">

    <form action="##" class="member-forms" method="get">

      <p class="mf-head rel tc">

        <span class="f24">用户登录</span>

      </p>

      <p 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位字符之间" />

      </p>

      <p 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位" />

      </p>

      <input type="submit" class="mf-btn mt30" id="loginBtn" />

    </form>

  </p>

  <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>

<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>