首先創建一個基本的表單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form id="registerForm">
請輸入用戶名：<input type="text" name="userName"/>
請輸入密碼：<input type="text" name="password"/>
請輸入手機號碼：<input type="text" name="phoneNumber"/>
<button>提交</button>
</form>
<script src="./validator.js"></script>
</body>
</html>
普通寫法
validator.js
var registerForm = document.getElementById('registerForm');
registerForm.onsubmit = function () {
if (registerForm.userName.value === '') {
alert('用戶名不能為空');
return false;
}
if (registerForm.password.value.length < 6) {
alert('密碼長度不能少于6位');
return false;
}
if (!/(^1[3|5|8][0-9]{9}$)/.test(registerForm.phoneNumber.value)) {
alert('手機號碼格式不正確');
return false;
}
}
策略模式
const 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
}
}
}
const Validator = function () {
this.cache = []
}
Validator.prototype.add = function (dom, rule, errorMsg) {
let arr = rule.split(':')
this.cache.push(function () {
let strategy = arr.shift()
arr.unshift(dom.value)
arr.push(errorMsg)
return strategies[strategy].apply(dom, arr)
})
}
Validator.prototype.start = function () {
for (let i = 0, validatorFunc; validatorFunc = this.cache[i++];) {
let msg = validatorFunc()
if (msg) {
return msg
}
}
}
const validateFunc = function () {
let validator = new Validator()
/* 添加校驗規則 */
validator.add(registerForm.userName,'isNonEmpty','用戶名不能為空')
validator.add(registerForm.userName,'minLength:6','用戶名長度不能少于6位')
validator.add(registerForm.password,'minLength:6','密碼長度不能少于6位')
validator.add(registerForm.phoneNumber,'isMobile','手機號碼格式不正確')
let errorMsg = validator.start()
return errorMsg
}
let registerForm = document.getElementById('registerForm')
registerForm.onsubmit = function () {
let errorMsg = validateFunc()
if (errorMsg) {
console.log(errorMsg)
return false
}
}
如果同一個表單要添加多個校驗規則的話，只能重新寫一行代碼，不夠優雅，可以改寫add函數，變成配置的形式添加rule，下面是優化版。
優化版
/* 其他代碼一樣，這里只寫出改變的代碼*/
Validator.prototype.add = function (dom, rules) {
let self = this
for (var i = 0, rule; rule = rules[i++];) {
(function (rule) {
let strategyArr = rule.strategy.split(':')
let errorMsg = rule.errorMsg
self.cache.push(function () {
let strategy = strategyArr.shift()
strategyArr.unshift(dom.value)
strategyArr.push(errorMsg)
return strategies[strategy].apply(dom, strategyArr)
})
})(rule)
}
}
const validateFunc = function () {
let validator = new Validator()
/* 添加校驗規則 */
// validator.add(registerForm.userName,'isNonEmpty','用戶名不能為空')
// validator.add(registerForm.userName,'minLength:6','用戶名長度不能少于6位')
// validator.add(registerForm.password,'minLength:6','密碼長度不能少于6位')
// validator.add(registerForm.phoneNumber,'isMobile','手機號碼格式不正確')
/* 改進版 */
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: '手機號碼格式不正確'
}]);
let errorMsg = validator.start()
return errorMsg
}
