位置：首页>> 网络编程>> JavaScript>> 如何使用JavaScript策略模式校验表单

如何使用JavaScript策略模式校验表单

作者：浅笑·　　发布时间：2024-11-19 04:23:13　

标签：JS,策略模式,校验表单

概述

Web项目中，登录，注册等等功能都需要表单提交，当把用户的数据提交给后台之前，前端一般要做一些力所能及的校验，比如是否填写，填写的长度，密码是否符合规范等等，前端校验可以避免提交不合规范的表单。

假如我们有一个表单，校验逻辑如下：

用户名不为空
密码长度不低于6位
手机号符合格式

未使用策略模式的表单校验

当没有使用策略模式时，即我们首先会想到的校验模式通常是这样的：

<body>
<form id="registerForm">
<label for="username">输入用户名：<input type="text" name="username"></label>
<label for="password">输入密码：<input type="password" name="password"></label>
<label for="phone">输入密码：<input type="text" name="phone"></label>
</form>
<script>
const form = document.querySelector('.registerForm');
form.onsubmit = function(){
if(form.username.value === ''){
alert('用户名不能为空')
return;
}
if(form.password.value.length < 6){
alert('密码长度不能小于6位')
return;
}
if(!/(^1[3|5|8][0-9]{9}$)/.test(form.phone.value)){
alert('手机号格式不正确')
return;
}
}
</script>
</body>

这种代码编写方式十分常见，但它的缺点同样很明显：

onsubmit函数过于庞大，包含很多if-else，要覆盖所有规则
onsubmit函数缺乏弹性，如果要进入一种新的校验规则，就要改函数的内容实现，违反开放-闭合原则
代码复用性较差，如果再写一个表单，就要复制很多重复的代码

使用策略模式优化

首先封装校验函数为一个对象：

const strategies = {
empty(value, errMsg){
if(value.length === 0){
return errMsg;
}
},
minLength(value, len, errMsg){
if(value.length < len){
return errMsg;
}
},
isMobile(value, errMsg){
if(!/(^1[3|5|8][0-9]{9}$)/.test(value)){
return errMsg;
}
}
}

我们还要一个Validator类, 这个类用于向目标表单添加验证规则，它的用法如下:

const validate = function(){
const validator = new Validator();
validator.add(Form.userName, 'empty', '用户名不能为空');
validator.add(Form.password, 'minLength:6', '密码长度不能少于6位');
validator.add(Form.phone, 'isMobile', '手机号码格式不正确');
const errMsg = validator.start();
return errMsg;
}

如代码所示，validator实例有add方法，接收3个参数，第一个为需要验证的表单实例，第二个为验证方法，冒号后面为传入的参数。第三个为验证未通过的错误提示信息。

start方法，用于启动校验，如果没通过会返回未通过的提示信息，可在之后的逻辑中进行处理

Validator类的编写:

class Validator {
constructor(){
this.rules = [];
}
add(elem, rule, err){
const args_arr = rule.split(":");
this.rules.push(()=>{
const handler = args_arr.shift();
args_arr.unshift(elem.value);
args_arr.push(err);
return strategies[handler].apply(elem, args_arr)
})
}
start(){
let errmsg = []
for(let i = 0; i < this.rules.length; i++ ){
const err = this.rules[i]();
if(err){
errmsg.push(err)
}
}
return errmsg.join(",");
}
}

使用策略模式，我们使用配置的方式完成了表单的校验，这些规则可以用在以后任何校验表单的地方，更方便修改与复用

为单一表单项增加多个验证规则

我们的代码现在有一个缺点，就是只能为某一个表单项赋单一验证规则，无法实现一个表单多个验证规则，所以代码还有优化的空间

class Validator{
// ···
add(elem, rules){
rules.forEach(rule => {
const args_arr = rule.strategy.split(":");
this.rules.push(()=>{
const handler = args_arr.shift();
args_arr.unshift(elem.value);
args_arr.push(rule.errMsg);
return strategies[handler].apply(elem, args_arr)
})
});
}
// ···
}

const validate = function(){
const validator = new Validator();
validator.add(Form.username,[{
strategy: 'empty',
errMsg: '用户名不能为空'
}]);
validator.add(Form.password, [{
strategy: 'minLength:6',
errMsg: '密码长度不能少于6位'
}]);
validator.add(Form.phone, [{
strategy: 'isMobile',
errMsg: '手机号码格式不正确'
}, {
strategy: 'empty',
errMsg: '手机号不能为空'
}]);
const errMsg = validator.start();
return errMsg;
}

只需要传参时传入一个对象数组，并在add函数里面添加相应的数组处理逻辑即可

策略模式的优点

优点：

避免多重条件选择语句
实现开闭原则，使得函数的使用更加易于切换，易于理解，易于扩展。
提高代码复用程度

来源：https://www.cnblogs.com/qianxiaox/p/13847510.html

投稿

如何使用JavaScript策略模式校验表单

概述

未使用策略模式的表单校验

使用策略模式优化

策略模式的优点

猜你喜欢