大家好，第一次寫有點正規的博客，以前都是隨手復制幾下。為了打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插件實現方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
