使用JavaScript策略模式校验表单
表单校验
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函数里面添加相应的数组处理逻辑即可
策略模式的优点
优点：
- 避免多重条件选择语句
- 实现开闭原则，使得函数的使用更加易于切换，易于理解，易于扩展。
- 提高代码复用程度
总结：
Peter Norvig说过，在函数作为一等对象的语言中，策略模式是隐形，strategy就是值为函数的变量。其实就是将封装好的策略函数当成参数传给使用它的target，被target调用的过程，用好策略模式，不仅让我们对该模式有更加深刻的理解，也使我们明白使用函数的好处。
本文引用自《Javascript设计模式与开发实践》
使用JavaScript策略模式校验表单的更多相关文章
- js 策略模式 实现表单验证
策略模式 简单点说就是:实现目标的方式有很多种,你可以根据自己身情况选一个方法来实现目标. 所以至少有2个对象 . 一个是策略类,一个是环境类(上下文). 然后自己就可以根据上下文选择不同的策略来执 ...
- javascript将异步校验表单改写为同步表单
同步表单校验的缺点 响应错误信息时,需要重新加载整个页面(虽然有缓存,客户端仍然需要通过http协议对比每个文件是否有更新,以保持文件最新) 服务器响应错误以后,用户之前所输入的信息全部丢失了,用户需 ...
- javascript策略模式的应用！
最近在看<JavaScript设计模式与开发实践>这本书,受益匪浅,小记录一下书中的各个demo,加深理解: 策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替 ...
- jQuery校验 表单验证
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
- jQuery form插件的使用--使用 fieldValue 方法校验表单
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- jQuery form插件的使用--用 formData 参数校验表单，验证后提交（简单验证）.
Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.引入依赖js <script src=& ...
- 第一百六十节，封装库--JavaScript，ajax注册表单到数据库
封装库--JavaScript,ajax注册表单到数据库 效果图 前台js var biaodan = $().xu_lie_biao_dan($('form').sh_jd()); //序列化获取表 ...
- Spring Boot构建的Web项目如何在服务端校验表单输入
本文首发于个人网站:Spring Boot构建的Web项目如何在服务端校验表单输入 这个例子用于演示在Spring Boot应用中如何验证Web 应用的输入,我们将会建立一个简单的Spring MVC ...
- ajax+FormData+javascript实现无刷新表单信息提交
ajax+FormData+javascript实现无刷新表单信息提交 原理: dom收集表单信息,利用FormData快速收集表单信息 ,实例化表单数据对象 同时收集fm的表单域信息. var f ...
随机推荐
- Jumpserver 一键部署(支持离线安装)
1.教程介绍1.1::通过本教程起到抛砖引玉效果,希望各位喜爱Jumpserver堡垒机的朋友受益良多. 1.2::以下提供的任何软件仅供学习交流使用. 2.下载链接2.1::centos_1810最 ...
- Java反射的应用 --- 内省
一.基础概念 内省(Introspector) 是Java 语言对 JavaBean 类属性.事件的一种缺省处理方法.Java JDK中提供了一套 API 用来访问某个属性的 getter/sette ...
- synchronized互斥锁实例解析
目录 synchronized互斥锁实例解析 1.互斥锁基础使用:防止多个线程同时访问对象的synchronized方法. 1.1.多个线程调用同一个方法 1.2.多个线程多个锁,升级为类锁 2.线程 ...
- CAD卸载/完美解决安装失败/如何彻底卸载清除干净cad各种残留注册表和文件的方法
在卸载cad重装CAD时发现安装失败,提示是已安装或安装失败.这是因为上一次卸载后没有清理干净,系统会误认为已经安装过了.有的同学是新装的系统也会出现安装失败的情况,这是因为C++ 或者.NET的原因 ...
- Web of science|SCIE|影响因子|SSCI|高被引论文|领域中热点论文|
信息检索: 数据库 Web of science 影响因子只是针对期刊打分,并不是对文章打分.所以对文章评价可以看引用次数. SCIE (Science Citation Index Expanded ...
- python 有关堡垒机的那些事
堡垒机为了保证系统或服务器的安全性,防止运维和开发人员胡乱操作服务器,导致不必要的损失,使用堡垒机来完成对运维和开发人员的授权.用户统一登录堡垒机账号来操作系统或服务器.堡垒机等于成了生产系统的SSO ...
- 在linux中自动向设备中安装apk包
环境:华为手机 linux centos64 为了锻炼自己,我把脚本文件和APK文件放到了不同的路径下. 需求:将虚拟机中的100个apk包安装到手机中. import os,time os.chdi ...
- 微软推出中文学习AI助手Microsoft Learn Chinese
编者按:美国总统特朗普访华期间,他6岁的外孙女阿拉贝拉用中文普通话演唱和背诵传统诗歌的视频在中国社交媒体上引起广泛关注,可以感受得到,越来越多的人对中文学习充满了兴趣.智能私教微软小英帮助很多中国 ...
- 你的胃能Hold住未来的食物吗？
如果你是一名美食客,那么一定会发现现在越来越多的食物已经发生了翻天覆地的变化,很多食物正在以我们未知的形式出现在生活中,其中最大的莫过于分子美食.你想过吗?当食物发生改变的时候,你的胃是否能够Ho ...
- 【系统篇】Archlinux系统安装
本教程为最新安装Linux的教程,想看更详细可以到我B站主页看视频教程 ArchLinux安装配置手册[系统篇] 本教程参考自 https://wiki.archlinux.org/index.php ...