<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 onclick="registerForm.onsubmit">提交</button>
</form>
<script>
var strategies = {
isNoEmpty: 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
}
}
}
var Validator = function() {
this.cache = []
}
Validator.prototype.add = function(dom, rules) {
const that = this
for (var i = 0, rule; rule = rules[i++];) {
(function(rule) {
var strategyAry = rule.strategy.split(':')
that.cache.push(function() {
var strategy = strategyAry.shift()
strategyAry.unshift(dom.value)
strategyAry.push(rule.errorMsg)
return strategies[strategy].apply(dom, strategyAry)
})
})(rule)
}
}
Validator.prototype.start = function() {
for(var i = 0, validatorFun; validateFun = this.cache[i++];) {
var msg = validateFun()
if (msg) {
return msg
}
}
}
var validateFun = function() {
const validator = new Validator()
validator.add(registerForm.userName, [{
strategy: 'isNoEmpty',
errorMsg: '用户名不能为空'
},{
strategy: 'minLength: 10',
errorMsg: '用户名长度不能小于10位'
}])
validator.add(registerForm.password, [{
strategy: 'minLength: 6',
errorMsg: '密码长度不能少于6位'
}])
validator.add(registerForm.phoneNumber, [{
strategy: 'isMobile',
errorMsg: '手机号格式不正确'
}])
const errorMsg = validator.start()
return errorMsg
}
var registerForm = document.getElementById('registerForm')
registerForm.onsubmit = function() {
try{
const errorMsg = validateFun()
if (errorMsg) {
alert(errorMsg)
return false
}
} catch(err) {
throw new Error(err)
}
}
</script>
</body>
