溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關jQuery如何實現validata插件，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
為了打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插件”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
