您的位置：首页 > Web前端 > JavaScript

JavaScript 策略模式封装表单验证库

2017-12-05 15:06 645 查看

直接上代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="form">
<p>用户名:<input type="text" name="userName" /></p>
<p>密码:<input type="password" name="userWord"/></p>
<p>手机:<input type="tel" name="userPhone"/></p>
<p><input type="submit" value="提交"></p>
</form>
</body>
<script>
var form = document.getElementById('form');
//定义验证算法类
var autoForm = {
isNonEmpt : function(val,msg){
if(val == ''){
return msg;
}
},
minLength : function (val,length,msg) {
if(val.length<length){
return msg;
}
},
isPhone : function (val,msg) {
if(!/(^1[0-9]{10}$)/.test( val )){
return msg;
}
}

//这里可以封装无数个验证算法

};

var Validator = function(){
this.cache = [];  //保存检验规则
};

Validator.prototype.add = function(dom,rule){
var self = this;
for(var i=0,rule;rule = rule[i++];){
(function(rule){
var strateguAry = rule.strategy.split(':'),//将带有值的参数分开
errorMsg = rule.errorMsg;
self.cache.push(function(){
var strategy = strateguAry.shift();//获取验证算法的名称
strateguAry.unshift(dom.value);//获取将要验证的文本
strateguAry.push(errorMsg);
return autoForm[strategy].apply(dom,strateguAry);//借用autoForm的方法进行验证
})
})(rule)
}
};
Validator.prototype.start = function(){
for(var i=0,fun;fun = this.cache[i++];){
var msg = fun();
if(msg){
return msg;
}
}
}

//定义执行算法类,并返回验证结果
var validate = function(){
var validator = new Validator();
validator.add(form.userName,[{
strategy:'isNonEmpt',
errorMsg:'用户名不能为空!'
},{
strategy:'minLength:2',
errorMsg:'用户名最少两个字符!'
}]);
validator.add(form.userWord,[{
strategy:'isNonEmpt',
errorMsg:'密码不能为空!'
},{
strategy:'minLength:6',
errorMsg:'密码最少6个字符!'
}
]);
validator.add(form.userPhone,[{
strategy:'isNonEmpt',
errorMsg:'手机号码不能为空!'
},{
strategy:'minLength:6',
errorMsg:'手机号码格式不正确!'
}
]);
var errorMsg = validator.start();
return errorMsg;
};
//表单提交
form.onsubmit = function(){
var errorMsg = validate();
if(errorMsg){
alert(errorMsg);
return false;
}else{
alert('提交成功!')
};
}
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航