* index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单校验·策略模式</title>
<link type="text/css" rel="stylesheet" href="./css/style.css">
</head>
<body>
<form action="post.php" id="registerForm" method="POST">
<div class="form-group">
<label for="userName">用户名</label>
<input type="text" id="userName" name="userName" />
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" name="password" />
</div>
<div class="form-group">
<label for="phoneNumber">手机号</label>
<input type="text" id="phoneNumber" name="phoneNumber">
</div>
<button type="submit" class="btn btn-sm btn-light">提交</button>
</form>
<script type="text/javascript" src="./js/index2.js"></script>
</body>
</html>
* css/style.css
.form-group {margin-bottom: 15px; }
label {
min-width: 4em;
width: auto;
text-align: right;
display: inline-block;
}
label:after {
content: ": ";
display: inline-block;
}
input, button, select, optgroup, textarea {
margin: 0; font-family: inherit; font-size: inherit; line-height: inherit;
}
button, input {overflow: visible;}
button, select {text-transform: none; }
form {width: 400px; }
form .btn[type=submit] {margin-left: 5em; }
.btn {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn-sm, .btn-group-sm > .btn {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
line-height: 1.5;
border-radius: 0.2rem;
}
.btn-light {
color: #212529;
background-color: #f8f9fa;
border-color: #f8f9fa;
}
.btn-light:hover {
color: #212529;
background-color: #e2e6ea;
border-color: #dae0e5;
}
.btn-light:focus, .btn-light.focus {
box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}
.btn-light.disabled, .btn-light:disabled {
color: #212529;
background-color: #f8f9fa;
border-color: #f8f9fa;
}
* js/index2.js
一个文本输入框对应多种校验规则
var strategies = {
// 不为空
isNonEmpty: function(value, errorMsg) {
if (value.length < 1) {
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
}
}
};
function Validator() {
this.cache = []; // 保存校验规则
}
Validator.prototype.add = function(dom, rules) {
var self = this;
for (var i = 0, rule; rule = rules[i]; 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() {
var msg = '';
for (var i = 0, vf; vf = this.cache[i]; i++) {
msg = vf();
if (msg) {return msg;}
}
return msg;
};
var form = document.getElementById("registerForm");
form.onsubmit = function(e) {
e.preventDefault();
// 如果errorMsg有确切的返回值, 说明未通过校验
var errorMsg = validateFunc();
if (errorMsg) {
alert(errorMsg);
return false;
}
// 校验成功
var btn = form.querySelector("button"), html = btn.innerHTML;
btn.innerHTML = "提交中...";
btn.classList.add("disabled");
setTimeout(function() {
btn.innerHTML = html;
}, 1000);
};
var validateFunc = function() {
// 创建一个validator对象
var validator = new Validator();
/**************添加一些校验规则*******************/
validator.add(form.userName, [
{strategy: 'isNonEmpty', errorMsg: '用户名不能为空'},
{strategy: 'minLength:10', errorMsg: '用户名不能小于10位'}
]);
validator.add(form.password, [
{strategy: "minLength:6", errorMsg: "密码长度不能少于6位"}
]);
validator.add(form.phoneNumber, [
{strategy: "isMobile", errorMsg: "手机号码格式不正确"}
]);
return validator.start();
};
* Run:
php -S localhost:8080