js 策略模式 实现表单验证
程序员文章站
2022-04-11 20:13:31
策略模式 简单点说就是:实现目标的方式有很多种,你可以根据自己身情况选一个方法来实现目标. 所以至少有2个对象 . 一个是策略类,一个是环境类(上下文). 然后自己就可以根据上下文选择不同的策略来执行方案. 策略模式的优点: 1. 策略模式利用组合、委托和多态等技术和思想，可以有效地避免多重条件选择 ......
策略模式
简单点说就是:实现目标的方式有很多种,你可以根据自己身情况选一个方法来实现目标.
所以至少有2个对象 . 一个是策略类,一个是环境类(上下文). 然后自己就可以根据上下文选择不同的策略来执行方案.
策略模式的优点:
1. 策略模式利用组合、委托和多态等技术和思想，可以有效地避免多重条件选择语句
2. 策略模式提供了对开放-封闭原则的完美支持，将算法封装在独立的 策略类 中，使得它们易于切换，易于理解，易于扩展.
// html
<!doctype html>
<head>
<meta charset="utf8">
<title>策略模式实现表单验证</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="rule.js"></script>
<script src="validator.js"></script>
</head>
<body>
<form action="#" method="get" id="form">
<div class="field">
<label>用户名</label>
<input type="text" name="name">
</div>
<div class="field">
<label>联系电话</label>
<input type="text" name="mobile">
</div>
<div class="field">
<label>邮箱</label>
<input type="text" name="email">
</div>
<button class="submit" type="submit">提交</button>
</form>
<script>
let dom = document.getelementbyid("form");
let formvalid = new formvalid(dom);
formvalid.add({
field: "name",
rule: new requiredrule(),
errormsg: "字段必填"
})
formvalid.add({
field: "name",
rule: new lengthrule(10),
errormsg: "限定长度为10个字符"
})
formvalid.add({
field: "mobile",
rule: new mobilerule(),
errormsg: "手机号码错误"
})
formvalid.add({
field: "email",
rule: new emailrule(),
errormsg: "邮箱格式错误"
})
dom.onsubmit = function (event) {
let result = formvalid.isvalid();
if (result !== true) {
alert(result);
return false;
}
alert("提交成功");
}
</script>
</body>
</html>
// css
#form{
margin: 50px auto;
width: 500px;
}
input {
width: 350px;
height: 24px;
padding: 0 4px;
float: left;
}
.field{
margin-top: 10px;
overflow: hidden;
}
label {
float: left;
text-align: right;
width: 100px;
overflow: hidden;
padding-right: 5px;
}
.submit{
margin-top: 20px;
margin-left:104px;
}
// 策略类
/**
* 必填
*/
class requiredrule {
/**
* 验证
* @param {string} value 值
* @param {string} errormsg 错误信息
* @param {any} attach 附加参数
* @returns {string|bool}
*/
test(value, errormsg, attach) {
return /^(:?\s*)$/.test(value) ? errormsg : true;
}
}
/**
* 范围
*/
class rangerule {
/**
* 构造函数
* @param {array} range
*/
constructor(range) {
this.range = range;
}
/**
* 验证
* @param {string} value 值
* @param {string} errormsg 错误信息
* @returns {string|bool}
*/
test(value, errormsg) {
value = number.parsefloat(value);
if (this.range[0] <= value && this.range[1] > value) {
return true;
}
return errormsg;
}
}
/**
* 有效数值验证
*/
class numberrule {
/**
* 验证
* @param {string} value 值
* @param {string} errormsg 错误信息
* @returns {string|bool}
*/
test(value, errormsg) {
return /^(?:\d+)$/.test(value) || errormsg;
}
}
/**
* 邮箱验证
* 格式:登录名@主机名.域名
*/
class emailrule {
constructor() {
this.rule = new regexp(/(?:\w+)@(?:\w+)\.(?:\w+)/);
}
/**
* 验证
* @param {string} value 值
* @param {string} errormsg 错误信息
* @returns {string|bool}
*/
test(value, errormsg) {
return this.rule.test(value) || errormsg;
}
}
/**
* 手机号验证
*/
class mobilerule {
constructor() {
this.rule = new regexp(/^1\d{10}$/);
}
/**
* 验证
* @param {string} value 值
* @param {string} errormsg 错误信息
* @returns {string|bool}
*/
test(value, errormsg) {
return this.rule.test(value) || errormsg;
}
}
class lengthrule {
constructor(maxlength) {
this.maxlength = maxlength;
}
/**
* 验证
* @param {string} value 值
* @param {string} errormsg 错误信息
* @returns {string|bool}
*/
test(value, errormsg) {
return value.length > this.maxlength ? errormsg : true;
}
}
// 环境类
class formvalid {
/**
* 构造函数
* @param {htmlformelement} form 元素节点
*/
constructor(form) {
this.form = form;
this.rules = [];
}
/**
* 添加验证规则
* @param {object} option
* @param {string} option.field 字段名
* @param {object} option.rule 规则
* @param {string} option.errormsg 错误信息
*/
add({ field, rule, errormsg }) {
if (typeof rule.test == "function" && this.form[field]) {
this.rules.push(() => {
return rule.test(this.form[field].value, errormsg);
});
}
}
isvalid() {
let result = [];
for (let i = 0; i < this.rules.length; i++) {
let r = this.rules[i]();
if (r !== true) result.push(r);
}
return result.length > 0 ? result : true;
}
}
源码：https://pan.baidu.com/s/17_obg1dqmbxadg_aw3swgg
样本：http://js.zhuamimi.cn/%e8%a1%a8%e5%8d%95%e9%aa%8c%e8%af%81/