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結(jié)構(gòu)，沒什么將的,
_attachEvent: 自定義的事件的機制（其實就是用了jquery的trigger）
_bind: 首先是事件功能的綁定，為每一個input都綁定事件,each循環(huán)__RULES__（就是規(guī)則），找到所以自定義data的值（也就是每一個input中所需要的規(guī)則校驗），用if來判斷，當前的input中配置了幾個data屬性，并且通過 rule.call(_$field)（這句話的意思就是調(diào)用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結(jié)構(gòu)
_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");
//這是調(diào)用插件的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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這里獲得標簽名為大寫，如:A , DIV，需要的朋友可以參考下2012-07-07
JQuery中阻止事件冒泡方式有哪些？本文為大家準備了兩種阻止事件冒泡的方式，兩種方式的區(qū)別在于。return false 不僅阻止了事件往上冒泡，而且阻止了事件本身2014-01-01
jQuery-1.9.1源碼分析系列（十）事件系統(tǒng)之事件包裝
這篇文章主要介紹了jQuery-1.9.1源碼分析系列（十）事件系統(tǒng)之事件包裝的相關(guān)資料,需要的朋友可以參考下2015-11-11
本文主要分享了jquery實現(xiàn)表單獲取短信驗證碼的代碼。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
其實這個也不算是 resizable 的BUG,但從官網(wǎng)下載下來的確實存在問題2010-10-10
jquery 動態(tài)增加,減少input表單的簡單方法(必看)
下面小編就為大家?guī)硪黄猨query 動態(tài)增加,減少input表單的簡單方法(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
本文講解了JQuery切換顯示的效果實例代碼，需要的朋友可以參考一下2013-02-02
這篇文章主要介紹了JQuery頁面地址處理插件jqURL詳解的相關(guān)資料,需要的朋友可以參考下2015-05-05
JavaScript 學習筆記之一jQuery寫法圖片等比縮放以及預加載
以前對于JavaScript總是在用到的時候在頁面上寫幾個函數(shù)，基本沒考慮到函數(shù)的封裝與重用，最近有個項目可能對于這方面要求有點高，所以就研究了下類似jQuery的封裝2012-06-06
本文給大家分享最常用的jquery表單驗證實例代碼，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-05-05