// 策略对象
var strategies = {
isNotEmpty: function(value, errorMsg) {
if(!value) {
return errorMsg;
}
},minLength: function(value, length, errorMsg) {
if(value.length < length) {
return errorMsg
}
},isMobile: function(value, errorMsg) {
if(!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
return errorMsg
}
}
}// Validator类
var Validator = function() {
this.cache = [];
}Validator.prototype.add = function(dom, rules) {
var self = this;for(var i = 0; rule = rules[ i++ ];) {
(function(rule) {
var strategyAry = rule.strategy.split(':');
var errorMsg = rule.errorMsg;self.cache.push(function() {
var strategy = strategyAry.shift();
strategyAry.unshift( dom.value );
strategyAry.push( errorMsg );
return strategies[ strategy ].apply( dom, strategyAry );
})
})( rule )
}}
Validator.prototype.start = function() {
for(var i = 0, validataFunc; validataFunc = this.cache[ i++ ];) {
var msg = validataFunc();
if(msg) {
return msg;
}
}
}
// 客户调用代码
var registerForm = document.getElementById( 'registerForm' );
var validataFunc = function() {
var validator = new Validator();
validator.add( registerForm.userName, [{
strategy: 'isNotEmpty',
errorMsg: '用户名不能为空'
}, {
strategy: 'minLength:6',
errorMsg: '长度不能少于6位'
}] )validator.add( registerForm.phoneNumber, [{
strategy: 'minLength:6',
errorMsg: '长度不能少于6位'
}] )validator.add( registerForm.phoneNumber, [{
strategy: 'isMobile',
errorMsg: '手机号格式不正确'
}] )var errorMsg = validator.start();
return errorMsg;
}
registerForm.onsubmit = function() {
var errorMsg = validataFunc();
if(errorMsg) {
alert(errorMsg);
return false;
}
}
策略模式-表单校验
最新推荐文章于 2024-08-20 23:27:33 发布