這篇文章主要講解了jQuery如何實現高度靈活的表單驗證功能，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
表單驗證是前端開發過程中常見的一個需求，產品需求、業務邏輯的不同，表單驗證的方式方法也有所區別。而最重要的是我們要清楚，表單驗證的核心原則是——錯誤信息提示準確，并且盡可能少的打擾/干擾用戶的輸入和體驗。
基于以上原則，個人總結出表單驗證的通用方法論：
為了使開發思路更加清晰，我將表單驗證的過程分為兩步：第一步，用戶輸入完驗證當前輸入的有效性；第二步，表單提交時驗證整個表單?？紤]如下布局：
<form action="">
<ul>
<li><label for="username">用戶名</label>
<input type="text" name="username" id="username" placeholder="用戶名"/></li>
<li>
<label for="password">密碼</label>
<input type="text" name="password" id="password" placeholder="密碼"/>
</li>
<li>
<label for="password">確認密碼</label>
<input type="text" name="password2" id="password-confirm" placeholder="確認密碼"/>
</li>
<li>
<label for="phone">手機</label>
<input type="text" name="mobile" id="phone"/>
</li>
<li>
<label for="email">郵箱</label>
<input type="text" name="email" id="email"/>
</li>
</ul>
<button type="submit" id="submit-btn">提交</button>
</form>一個較為通用的JS驗證版本如下：
(function (window, $, undefined) {
/**
* @param {String} $el 表單元素
* @param {[Array]} rules 自定義驗證規則
* @param {[Boolean]} isCheckAll 表單提交前全文驗證
* @param {[Function]} callback 全部驗證成功后的回調
* rules 支持四個字段：name, rule, message, equalTo
*/
function Validator($el, rules, isCheckAll, callback) {
var required = 'required';
var params = Array.prototype.slice.call(arguments);
this.$el = $el;
this._rules = [
{// 用戶名
username: required,
rule: /^[\u4e00-\u9fa5\w]{6,12}$/,
message: '不能包含敏感字符'
}, {// 密碼
password: required,
rule: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z_@]{6,20}$/,
message: '只支持數字字母下劃線,且不為純數字或字母'
}, {// 重復密碼
password2: required,
rule: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z_@]{6,20}$/,
message: '只支持數字字母下劃線,且不為純數字或字母',
equalTo: 'password'
}, {// 手機
mobile: required,
rule: /^1[34578]\d{9}$/,
message: '請輸入有效的手機號碼'
}, {// 驗證碼
code : required,
rule: /^\d{6}$/,
message: '請輸入6位數字驗證碼'
}, {// 郵箱
email : required,
rule: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
message: '請輸入正確的郵箱'
}
];
this.isCheckAll = false;
this.callback = callback;
// 合并參數
this._rules = this._rules.concat(params[1]);
if(params[2]) {
if(typeof params[2] == 'function') {
this.callback = params[2];
}else {// 提交表單時是否開啟全部驗證
this.isCheckAll = params[2];
}
}
// 用于存儲合去重后的參數
this.rules = [];
}
Validator.prototype._getKey = function (obj) {
var k = '';
for(var key in obj) {
if(obj.hasOwnProperty(key)) {
if( key !== 'rule' && key !== 'message' && key !== 'equalTo') {
k = key;
}
}
}
return k;
};
/**
* 數組對象重復數據進行合并，后面的覆蓋前面的
*/
Validator.prototype.filterRules = function (arrObj) {
var _this = this,
h = {},
res = [],
arrObject = this._rules;
$.each(arrObject, function (i, item) {
var k = _this._getKey(item);
try {
if(!h[k] && h[k] !== 0) {
h[k] = i;
res.push(item);
}else {
res[h[k]] = $.extend(res[h[k]], item);
}
}catch(e) {
throw new Error('不是必填')
}
});
this.rules = res;
};
Validator.prototype.check = function () {
var _this = this;
$.each(_this.rules, function (i, item) {
var key = _this._getKey(item),
reg = item.rule,
equalTo = item.equalTo,
errMsg = item.message;
_this.$el.find('[name='+key+']')
.on('blur', function () {
var $this = $(this),
errorMsg = '',
val = $this.val(),
ranges = reg.toString().match(/(\d*,\d*)/),
range = '',
min = 0,
max = 0,
placeholderTxt = $(this).attr("placeholder") ? $(this).attr("placeholder") : '信息';
// 定義錯誤提示信息
if(val && val != 'undefined') { // 值不為空
if(ranges) { // 邊界限定
range = ranges[0];
min = range.split(',')[0] ? range.split(',')[0].trim() : 0;
max = range.split(',')[1] ? range.split(',')[1].trim() : 0;
if(val.length < min || val.length > max) { // 處理邊界限定的情況
if(min && max) {
errorMsg = '<span class="error-msg">請輸入'+min+'-'+max+'位'+placeholderTxt+'</span>';
}else if(min) {
errorMsg = '<span class="error-msg">最少輸入'+min+'位'+placeholderTxt+'</span>';
}else if(max) {
errorMsg = '<span class="error-msg">最多輸入'+max+'位'+placeholderTxt+'</span>';
}
}else { // 邊界正確但匹配錯誤
errorMsg = '<span class="error-msg">'+errMsg+'</span>';
}
}else { // 沒有邊界限定
errorMsg = '<span class="error-msg">'+errMsg+'</span>';
}
if(equalTo) {
var equalToVal = _this.$el.find('[name='+equalTo+']').val();
if(val !== equalToVal) {
errorMsg = '<span class="error-msg">兩次輸入不一致，請重新輸入</span>';
}
}
} else { // 值為空
errorMsg = '<span class="error-msg">請輸入'+placeholderTxt+'</span>'
}
if($('.error-msg').length > 0) return;
// 驗證輸入，顯示提示信息
if(!reg.test(val) || (equalTo && val !== equalToVal)) {
if($this.siblings('.error-msg').length == 0) {
$this.after(errorMsg)
.siblings('.error-msg')
.hide()
.fadeIn();
}
}else {
$this.siblings('.error-msg').remove();
}
})
.on('focus', function () {
$(this).siblings('.error-msg').remove();
})
});
};
Validator.prototype.checkAll = function () {
var _this = this;
if(_this.isCheckAll) {
_this.$el.find('[type=submit]')
.click(function () {
_this.$el.find('[name]').trigger('blur');
if($('.error-msg').length > 0) {
console.log('有錯誤信息');
return false;
}else {
console.log('提交成功');
_this.callback();
}
});
return false;
}
};
Validator.prototype.init = function () {
this.filterRules();
this.check();
this.checkAll();
};
$.fn.validator = function (rules, isCheckAll, callback) {
var validate = new Validator(this, rules, isCheckAll, callback);
return validate.init();
};
})(window, jQuery, undefined);你可以這樣使用：
var rules = [
{// 用戶名
username: 'required',
rule: /^[\u4e00-\u9fa5\d]{6,12}$/,
message: '只支持數字loo2222'
},
{// 密碼
password: 'required',
rule: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z_@]{6,20}$/,
message: 'mimmimmia'
},
{// 重復密碼
password2: 'required',
rule: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z_@]{6,20}$/,
message: '只支持數字字母下劃線,不能為純數字或字母2222',
equalTo: 'password'
},
{// 座機
telephone : 'required',
rule: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/,
message: '請輸入正確的座機'
}
];
$('form').validator(rules, true)看完上述內容，是不是對jQuery如何實現高度靈活的表單驗證功能有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
