js表单验证,使用设计模式的策略设计模式封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action='' id = 'registerForm' method='post'>
请输入用户名:<input type='text' name='userName' />
请输入密码:<input type='text' name = 'password' />
请输入手机号码:<input type='text' name = 'phoneNumber' />
<input type="submit" value="提交">
</form>
</body>
<script>
const strategies = {
isNonEmpty:function(value,errorMsg){
if(value===''){
return errorMsg;
}
},
minLength:function(value,length,errorMsg){
if(value.length<length){
return errorMsg;
}
},
maxLength: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;
}
}
};
const Validator = function(){
this.cache= [];
};
Validator.prototype.add =function(dom,rules){
var self = this;
for(var i=0,rule;rule = rules[i++];){
(function(rule){
var strategyAry = rule.strategy.split(':');
var errorMsg = rule.errorMsg;
self.cache.push(function(){
var strategy = strategyAry.shift();
console.log(dom);
strategyAry.unshift(dom.value);
strategyAry.push(errorMsg);
return strategies[strategy].apply(dom,strategyAry);
});
})(rule)
} //end for
};
Validator.prototype.start = function(){
for(var i=0,validatorFunc;validatorFunc = this.cache[i++];){
var errorMsg =validatorFunc();
if(errorMsg){
return errorMsg;
}
}
};
var registerForm = document.getElementById('registerForm');
var validataFunc = function(){
var validator =new Validator();
validator.add(registerForm.userName,[
{
strategy:'isNonEmpty',
errorMsg:'用户名不能为空'
},
{
strategy:'minLength:6',
errorMsg:'用户名长度不能小于6'
},
{
strategy:'maxLength:10',
errorMsg:'用户名长度不能大于10'
}
]);
validator.add(registerForm.password,[
{
strategy:'minLength:6',
errorMsg:'密码长度不能小于6'
}
]);
validator.add(registerForm.phoneNumber,[
{
strategy:'isMobile',
errorMsg:'手机号码格式不正确'
}
]);
var errorMsg =validator.start();
return errorMsg;
};
registerForm.onsubmit = function(e){
e.preventDefault();
var errorMsg =validataFunc();
if(errorMsg){
alert(errorMsg);
return false;
}
return false;
}
</script>
</html>
使用时在strategies添加策略方法,再使用validator.add(dom,[{},{}…])添加strategies的策略及提示信息。
es6封装
const strategies = {
isNonEmpty:function(value,errorMsg){
if(value===''){
return errorMsg;
}
},
minLength:function(value,length,errorMsg){
if(value.length<length){
return errorMsg;
}
},
maxLength: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;
}
}
};
class Validator{
constructor(){
this.cache = [];
this.strategies=strategies;
}
add(dom,rules){
let self = this;
for(let i=0,rule;rule = rules[i++];){
(function(rule){
let strategyAry = rule.strategy.split(':');
let errorMsg = rule.errorMsg;
self.cache.push(function(){
let strategy = strategyAry.shift();
console.log(dom);
strategyAry.unshift(dom.value);
strategyAry.push(errorMsg);
return strategies[strategy].apply(dom,strategyAry);
});
})(rule)
}
}
start(){
for(let i=0,validatorFunc;validatorFunc = this.cache[i++];){
let errorMsg =validatorFunc();
if(errorMsg){
return errorMsg;
}
}
};
}
export default Validator;