jQuery实现高度灵活的表单验证功能示例【无UI】

2020-05-29 07:26:30易采站长站整理

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();