jQuery validata插件實(shí)現(xiàn)方法
更新時(shí)間：2017年06月25日 12:02:52 投稿：jingxian
下面小編就為大家?guī)硪黄猨Query validata插件實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
大家好，第一次寫有點(diǎn)正規(guī)的博客，以前都是隨手復(fù)制幾下。為了打LOL,我寫快點(diǎn)，代碼我都復(fù)制在最下面了，并且寫了大量的注釋。
首先我寫jquery插件，喜歡這么寫（好處有很多，以后在講，哈哈，看過jQuery源碼應(yīng)該知道）：
(function(root,factory,plug,undefined){
factory(root.jQuery,plug)
})(window,function($,plug){
/*
在這里寫邏輯
一：默認(rèn)的參數(shù) var __dEFAULTS__，
二：規(guī)則（可根據(jù)業(yè)務(wù)需求自己配置） var __RULES__，
三：原型 var __PROTOTYPE__，
_init: 初始化DOM結(jié)構(gòu)，沒什么將的,
_attachEvent: 自定義的事件的機(jī)制（其實(shí)就是用了jquery的trigger）
_bind: 首先是事件功能的綁定，為每一個(gè)input都綁定事件,each循環(huán)__RULES__（就是規(guī)則），找到所以自定義data的值（也就是每一個(gè)input中所需要的規(guī)則校驗(yàn)），用if來判斷，當(dāng)前的input中配置了幾個(gè)data屬性，并且通過 rule.call(_$field)（這句話的意思就是調(diào)用rule函數(shù)的時(shí)候，rule函數(shù)里的this引用變成了_$field），把input中的rule規(guī)則判斷一下。如果為false，那么就在input的父元素下面添加一個(gè)p標(biāo)簽，那么怎么讓p標(biāo)簽中的內(nèi)容讓用戶來配置呢？<p class='message'>"+(_$field.data(key+"-message")||_$this.errorMessage)+"</p>，這其中的意思是如果錯(cuò)了，那么就不往下檢索rule了，直接return result（因?yàn)閞ule返回為false,所以這里的result也為false），來阻止。并且添加p標(biāo)簽，并且根據(jù)result的值來判斷input的父元素,來個(gè)父元素加上一個(gè)success或error。最后還有submit方法：這個(gè)方法是用來通過input父元素的class中有沒有error，來判斷觸發(fā)哪一個(gè)自定義事件
四：$.fn[plug]
一：首先判斷當(dāng)前元素是否是from標(biāo)簽，不是的話，throw一個(gè)錯(cuò)誤
二：$.extend(this,__dEFAULTS__,options,__PROTOTYPE__); (....貌似有同學(xué)面試死在這個(gè)上面了，有空講一下吧)
三：this._init(); this._bind(); return this;
五：根據(jù)業(yè)務(wù)需求，用戶自定義添加rule：就是如下添加一個(gè)方法，就可以了，（下次有時(shí)間還是講一下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) {
//默認(rèn)參數(shù)
var __dEFAULTS__ = {
triggerEvent: "keyup",
errorMessage: "You entered a wrong"
};
/*
require(需求) 必填項(xiàng)
regex（正則表達(dá)式）正則驗(yàn)證
length 長(zhǎng)度驗(yàn)證
minlength 最短的長(zhǎng)度
maxlength 最長(zhǎng)的長(zhǎng)度
between 兩者之間的長(zhǎng)度
equalto 和xxx相同
greaterThan 大于
lessThan 小于
middle 兩者之間的數(shù)字
integer 整數(shù)
number 必須是數(shù)字
email 郵箱地址
mobile 電話號(hào)碼
phone 手機(jī)號(hào)碼
uri 有效的統(tǒng)一資源標(biāo)識(shí)符
cardId 身份證號(hào)碼
bankId 銀行卡號(hào)碼
....其他的規(guī)則（根據(jù)業(yè)務(wù)規(guī)則來）
*/
var __RULES__ = {
require: function() {
return this.val() != "";
}, //(需求) 必填項(xiàng)
regex: function() {
return new RegExp(this.data("regex")).test(this.val());
}, //（正則表達(dá)式）正則驗(yàn)證
length: function() {
return this.val().length == Number(this.data("length"));
}, // 長(zhǎng)度驗(yàn)證
minlength: function() {
return this.val().length >= Number(this.data("minlength"));
}, // 最短的長(zhǎng)度
maxlength: function() {
return this.val().length <= Number(this.data("maxlength"));
}, // 最長(zhǎng)的長(zhǎng)度
between: function() {
var length = this.val().length;
var between = this.data("between").split("-");
return length >= Number(between[0]) && length <= Number(between[1]);
}, // 兩者之間的長(zhǎng)度
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());
}, // 電話號(hào)碼
phone: function() {
return /^\d{4}\-\d{8}$/.test(this.val());
}, // 手機(jī)號(hào)碼
uri: function() {
return /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/g.test(this.val());
}, // 有效的統(tǒng)一資源標(biāo)識(shí)符
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ā)機(jī)制
_attachEvent: function(event, args) {
this.trigger(event, args);
},
//事件
_bind: function() {
var _$this = this;
//事件功能綁定
this.$fields.on(this.triggerEvent, function() {
var _$field = $(this); //需要驗(yàn)證的表單
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標(biāo)簽
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è)務(wù)需求增加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">帳號(hào)：</span>
<input type="text" class="mf-txt" id="username" placeholder="請(qǐng)輸入用戶名/手機(jī)號(hào)" data-require="true" data-require-message="用戶名必須填寫" data-regex="^\w+$" data-regex-message="用戶應(yīng)該是由字母數(shù)字下劃線所組成" data-between="6-12" data-between-message="用戶名長(zhǎng)度必須是在6-12位字符之間" />
</div>
<div class="mf-line">
<span class="mf-name">密碼：</span>
<input type="password" class="mf-txt" id="password" placeholder="請(qǐng)輸入密碼" data-require="true" data-require-message="密碼必須填寫" data-regex="^[a-zA-Z0-9]+$" data-regex-message="密碼應(yīng)該是由字母數(shù)組所組成" data-minlength="8" data-minlength-message="密碼長(zhǎng)度最少8位" data-maxlength="12" data-maxlength-message="密碼長(zhǎng)度最多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插件實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這里獲得標(biāo)簽名為大寫，如:A , DIV，需要的朋友可以參考下2012-07-07
JQuery中阻止事件冒泡方式有哪些？本文為大家準(zhǔn)備了兩種阻止事件冒泡的方式，兩種方式的區(qū)別在于。return false 不僅阻止了事件往上冒泡，而且阻止了事件本身2014-01-01
jQuery-1.9.1源碼分析系列（十）事件系統(tǒng)之事件包裝
這篇文章主要介紹了jQuery-1.9.1源碼分析系列（十）事件系統(tǒng)之事件包裝的相關(guān)資料,需要的朋友可以參考下2015-11-11
jquery實(shí)現(xiàn)表單獲取短信驗(yàn)證碼代碼
本文主要分享了jquery實(shí)現(xiàn)表單獲取短信驗(yàn)證碼的代碼。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
其實(shí)這個(gè)也不算是 resizable 的BUG,但從官網(wǎng)下載下來的確實(shí)存在問題2010-10-10
jquery 動(dòng)態(tài)增加,減少input表單的簡(jiǎn)單方法(必看)
下面小編就為大家?guī)硪黄猨query 動(dòng)態(tài)增加,減少input表單的簡(jiǎn)單方法(必看)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
本文講解了JQuery切換顯示的效果實(shí)例代碼，需要的朋友可以參考一下2013-02-02
這篇文章主要介紹了JQuery頁(yè)面地址處理插件jqURL詳解的相關(guān)資料,需要的朋友可以參考下2015-05-05
JavaScript 學(xué)習(xí)筆記之一jQuery寫法圖片等比縮放以及預(yù)加載
以前對(duì)于JavaScript總是在用到的時(shí)候在頁(yè)面上寫幾個(gè)函數(shù)，基本沒考慮到函數(shù)的封裝與重用，最近有個(gè)項(xiàng)目可能對(duì)于這方面要求有點(diǎn)高，所以就研究了下類似jQuery的封裝2012-06-06
本文給大家分享最常用的jquery表單驗(yàn)證實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-05-05