jquery實現簡易驗證外掛封裝
本文例項為大家分享了封裝jquery簡易驗證外掛的具體程式碼，供大家參考，具體內容如下
html程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery資料校驗外掛開發</title>
<link rel="stylesheet" href="css/register.css" />
<link rel="stylesheet" href="css/validate.css" />
</head>
<body>
<main>
<section>
<form method="post" action="result.html" ac id="register">
<div class="register-wrap">
<div class="register">
<ul>
<li>
<label for="username">使用者名稱：</label>
<input type="text" id="username" name="username" tabindex="1" class="format-input" placeholder="請輸入使用者名稱" data-vt-required-msg="使用者名稱不能為空" data-vt-regexp-msg="使用者名稱必須是以字母、數字、下劃線組成,且不能以數字開頭(6-20位)" data-vt-required=true data-vt-regexp='^[\w_]\w{5,19}$' autofocus>
</li>
<li>
<label for="pwd">密碼：</label>
<input type="password" id="pwd" name="password" tabindex="2" class="format-input" placeholder="請輸入密碼" data-vt-required=true data-vt-regexp="^[a-zA-Z_][\w_]{5,11}$" data-vt-required-msg="密碼不能為空" data-vt-regexp-msg="密碼必須是由字母、數字、下劃線組成，且不能以數字開頭(6-12位)" >
</li>
<li>
<label for="confirmPwd">確認密碼：</label>
<input type="password" id="confirmPwd" name="password" tabindex="3" class="format-input" placeholder="請再次輸入密碼" data-vt-required=true data-vt-required-msg="密碼不能為空" data-vt-equals=true data-vt-equals-msg="兩次密碼不一致">
</li>
<li>
<label for="phone">手機號：</label>
<input type="text" id="phone" name="phone" tabindex="4" class="format-input" placeholder="請輸入手機號" data-vt-required=true data-vt-phone=true data-vt-required-msg="手機號不能為空" data-vt-phone-msg="手機號不合法">
</li>
<li>
<label for="tel">座機：</label>
<input type="text" id="tel" name="tel" tabindex="5" class="format-input" placeholder="請輸入座機號碼" data-vt-required=true data-vt-tel=true data-vt-required-msg="座機號不能為空" data-vt-tel-msg="座機號不合法">
</li>
<li>
<label for="email">郵箱：</label>
<input type="text" id="email" name="email" tabindex="6" class="format-input" placeholder="請輸入郵箱地址" data-vt-required=true data-vt-email=true data-vt-required-msg="郵箱不能為空" data-vt-email-msg="郵箱不合法" >
</li>
<li>
<label for="submitBtn"></label>
<input type="submit" value="註冊" id="submitBtn" tabindex="7" class="format-input submit-btn">
</li>
</ul>
</div>
</div>
</form>
</section>
</main>
<script src="js/jquery2.0.js"></script>
<script src="js/formValidate.js"></script>
<script>
$(function(){
$('#register').formValidate();
});
</script>
</body>
</html>css部分
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
ul li {
list-style: none;
position: relative;
}
input {
outline: 0;
}
.format-input {
display: inline-block;
width: 84%;
height: 35px;
padding: 0 0 0 3px;
border: 1px solid #fff;
}
:focus {
outline: 4px solid #007fff;
}
html,
body {
width: 100%;
height: 100%;
}
body {
min-height: 100%;
font: 12px/1.5 'Microsoft YaHei',arial,sans-serif;
background: url(../image/bj.jpg) no-repeat;
background-size: cover;
overflow: hidden;
}
.register-wrap {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 450px;
height: 415px;
margin: auto;
background: rgba(0,0.5);
}
.register {
width: 100%;
height: 100%;
padding: 20px 30px;
color: #fff;
}
.register > ul > li {
font-size: 0;
margin: 0 0 20px 0;
}
.register > ul > li label {
display: inline-block;
width: 16%;
font-size: 12px;
}
.submit-btn {
border: 1px solid transparent;
font-size: 18px;
font-weight: bold;
color: #fff;
background: #51a8ff;
box-shadow: 1px 1px #AFC4EA,
2px 2px #AFC4EA,
3px 3px #AFC4EA;
}
.submit-btn:hover {
cursor: pointer;
}
.submit-btn:focus {
outline: none;
border: 1px solid #f0f3f9;
}
.submit-btn:active {
border: 1px solid #f0f3f9;
transform: translate(1px,1px);
box-shadow: 1px 1px #AFC4EA,
2px 2px #AFC4EA;
}
提示錯誤的tips樣式：
.validate-error-tip {
position: absolute;
top: 0;
left: 0;
display: table;
min-width: 150px;
min-height: 35px;
font-size: 12px;
border: 1px solid lightblue;
padding: 5px;
background: #fff;
color: #666;
z-index: 9999;
}
.validate-error-tip:before {
position: absolute;
top: 0;
left: -15px;
display: block;
content: '';
width: 0;
height: 0;
border-color: transparent lightblue transparent transparent;
/*1、下邊框有顏色 對應著上邊框沒有寬度,是正三角形；2、上邊框有顏色 對應著下邊框沒寬度，是倒三角形*/
border-style: solid;
border-width: 15px 15px 15px 0;
}
javascript部分：
(function($,factory,pluginName) {
factory($,pluginName);
})(jQuery,function($,pluginName){
//外掛預設配置項
var __DEFAULT__ = {
//預設觸發驗證的事件為input事件
initEvent: 'input',
prefix: 'vt' //自定義屬性字首
};
//外掛內部編寫校驗規則
var __RULES__ = {
//正則
regexp: function(ruleData) {
return new RegExp(ruleData).test(this.val());
},
//必填項
required: function(ruleData) {
return $.trim(this.val()).length > 0;
},
//最小值
minLength: function(ruleData) {
return $.trim(this.val()).length > ruleData ;
},
//最大值
maxLength: function(ruleData) {
return $.trim(this.val()).length < ruleData;
},
//驗證兩次密碼是否一致
isEquals: function(ruleData) {
var pwd = $(':password').eq(0); //$(':password')[0]是什麼物件呢？
return pwd.val() === this.val();
},
//是否是郵箱
isEmail: function(ruleData) {
return /\w+@\w+\..+/g.test(this.val());
},
//是不是手機號
isPhone: function(ruleData) {
return /^1\d{10}$/g.test(this.val());
},
//是不是座機號碼
isTel: function(ruleData) {
return /^0\d{2,3}-\d{7,8}$/g.test(this.val());
}
};
$.fn[pluginName] = function(options) {
//標識是否提交表單
var $this = this;
if(!$this.is('form')) { return; }
//this: 這裡的this是jQuery例項物件
$this.$file = $this.find('input:not([type="button"][type="submit"])'); //給當前例項物件(也就是呼叫該外掛的jquery物件)新增一個$file的屬性
$.extend($this,__DEFAULT__,options); //以預設配置為優先，以使用者配置為覆蓋
//格式化rule規則。
// 將一個字串在每一個大寫字母前加上一個'-',並且全部轉為小寫
// vtEmailMsg > vt-email-msg
$this.formatRule = function(str,connector) {
if(typeof str !== 'string') {
return str;
}
//使用replace、正則(匹配單個大寫字母)
str = str.replace(/[A-Z]/g,function(match,index) {
if(index === 0) { return match.toLowerCase() }
return connector + match.toLowerCase();
});
return str;
};
//顯示錯誤資訊
$this.showErrorTip = function(errorMsg) {
var $tip = $("<div class='validate-error-tip'> </div>"),
offset = this.position(),
elHeight = this.outerHeight(),
elWidth = this.outerWidth();
if(this.siblings('.validate-error-tip').length > 0){
this.siblings('.validate-error-tip').eq(0).text(errorMsg).show();
} else {
$tip.text(errorMsg).
css({
top: offset.top,
left: offset.left + elWidth + 15,
width: $tip.width()
});
this.after($tip);
$tip.show();
}
};
//監聽form表單裡所有的input的事件
$this.$file.on(this.initEvent,function(){
var $input = $(this);
//清除錯誤提示框
$input.siblings('.validate-error-tip').remove();
//注意這裡是迴圈的我們外掛的規則，而不是使用者擁有的規則
$.each(__RULES__,function(key,fn) {
var rule = '',
errorMsg = '';
//如果key是以is字元開頭、則去掉is
if(key.indexOf('is') === 0) {
key = key.slice(2);
}
key = $this.formatRule(key,'-'); //將規則格式化為html中書寫的形式
rule = $input.data(__DEFAULT__.prefix + '-' + key); //獲取規則的值
errorMsg = $input.data(__DEFAULT__.prefix + '-' + key + '-msg'); //規則對應的提示資訊
//如果當前input有這個規則，則執行這個規則
if(rule) {
//執行規則測試是否通過
var isPassed = fn.call($input,rule); //改變規則函式fn執行時候的this，指向當前input jquery物件
if(!isPassed) {
//未通過、則錯誤提示
$this.showErrorTip.call($input,errorMsg);
}
}
});
});
//繫結提交表單的事件
this.on('submit',function(e) {
var isFormPassed = true;
$this.$file.trigger($this.initEvent);
$this.$file.each(function(index,current){
var $current = $(current);
if($current.siblings('.validate-error-tip').is(':visible')){
isFormPassed = false;
return false;
}
});
if(!isFormPassed) {
return isFormPassed;
}
});
};
//擴充套件新的驗證規則(實際上就是擴充套件上面__RULES__物件)
$.fn[pluginName].addRule = function(options) {
$.extend(__RULES__,options);
}
},'formValidate');
更多內容請參考《jquery表單驗證大全》 ，歡迎大家學習閱讀。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。