<!DOCTYPE html>
<html>
<head>
<title>demo2</title>
</head>
<body>
<form action="http:// xxx.com/register" id="registerForm" method="post">
请输入用户名：<input type="text" name="userName"/ >
请输入密码：<input type="text" name="password"/ >
请输入手机号码：<input type="text" name="phoneNumber"/ >
<button>提交</button>
</form>
</body>
<script type="text/javascript">
/***********************策略对象**************************/
var strategies = {
isNonEmpty: 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;rule = rules[i++];) {
(function (rule) {
var strategyAry = rule.strategy.split(':'),
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,validatorFunc;validatorFunc = this.cache[i++];) {
var errorMsg = validatorFunc();
if (errorMsg) {
return errorMsg;
}
}
}
/***********************客户调用代码**************************/
var registerForm = document.getElementById( 'registerForm' );
var validatorFunc = function () {
var validator = new Validator();
validator.add(registerForm.userName, [{
strategy: 'isNonEmpty',
errorMsg: '用户名不能为空'
},{
strategy: 'minLength: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 () {
var errorMsg = validatorFunc();
if (errorMsg) {
console.log(errorMsg);
return false;
}
}
</script>
</html>
