使用策略模式实现表单验证

1.什么是策略模式

策略模式说起来很高大上，其实现实生活中很常见。比如，你要从老家去北京故宫游玩，可选的出行方式有坐火车、开车自驾、坐飞机等几种方式，
至于选择哪种出现方式要看自己的经济能力和个人需求，而选择的过程就是一种策略模式。

2.应用例子-表单验证

在js代码中如何实现策略模式？

1.你得有一堆可供选择的策略strategies = [one, two, three,...]
2.根据不同的场景Context使用不同策略。

下面我使用策略模式完成登录界面的表单验证,如果不符合规则，进行弹窗提示

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />
</head><body><h1>登陆</h1><form id="registerForm"><span>请输入用户名：</span><input type="text" name="userName" placeholder="不能为空"/><br /><span>请输入密码：</span><input type="text" name="password" placeholder="最少6位"/><br /><span>请输入手机号码：</span><input type="text" name="phoneNumber" placeholder="请输入正确的手机号码"/><br /><button>登陆</button></form>
</body>
<script src="./index.js"></script>
</html>

1.把策略准备好，策略就是校验规则

const strategies = {isNoEmpty: function(value, errorMsg) {return value ? '' : errorMsg},minLength: function(value, errorMsg,length) {return value && value.length >= length ? '' : errorMsg},isMoble: function(value, errorMsg) {return /(^1[3|5|8][0-9]{9}$)/.test(value) ? '' : errorMsg;}
}

2.再写一个Context

// 校验类
const Validator = function(){this.rules = [];// 校验规则
}
// 添加校验规则到校验池
Validator.prototype.add = function(dom, rule, errorMsg){const key = Object.keys(rule)[0];const value = rule[key]this.rules.push(function(){// 执行key对应策略return strategies[key].apply(null, [dom.value, errorMsg, value])})
}
// 执行校验池
Validator.prototype.run = function(){for(let i = 0; i < this.rules.length; i ++){const msg = this.rules[i]()if (msg) return msg;}
}

3.业务代码

// 进行校验
const validateLoginData = function(){const validator = new Validator()validator.add(document.getElementsByName('userName')[0], {isNoEmpty: true}, '用户名不能为空')validator.add(document.getElementsByName('password')[0], {minLength: 6}, '密码最少6位')validator.add(document.getElementsByName('phoneNumber')[0], {isMoble: true}, '手机号不正确')return validator.run();
}
// 绑定事件
window.onload = function(){document.getElementById('registerForm').onsubmit = function(){console.log('xxxx')var errorMsg = validateLoginData()if(errorMsg){alert(errorMsg)return false;}}
}

js使用策略模式实现表单验证相关推荐

JS正则表达式实现简单的表单验证（账号，密码，手机号）
首先有三个文本框,和一个提交按钮,第一个输入账号,第二个密码,第三个手机号我们的需求:判断3个文本框是否全部输入正确,当我们点击提交时,如果有一个输入错误则不能提交,全部输入正确则提交成功: 下面直 ...
js——form表单验证
用js实现一个简易的表单验证效果: 代码: <html><head><title>js校验form表单</title><meta charset ...
html表单判断字符数,JS判断字符串长度，结合element el-input el-form 表单验证（英文占1个字符，中文汉字占2个字符）...
首先看看判断字符串长度的几种方法(英文占1个字符,中文汉字占2个字符) 方法一: function strlen(str) { var len = 0; for (var i = 0; i < ...
注册表单校验 js java,JavaScript表单验证完美代码
用原生JS写一个简单的表单验证首先,是html部分新用户注册基本信息用户名: 请输入至少3位的用户名密码: 请输入4到8位的密码确认密码: 请再输入一遍密码手机号码: 请输入11位手机号 ...
(转)强大的JQuery表单验证插件 FormValidator使用介绍
jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者( ...
强大的JQuery表单验证插件 FormValidator使用介绍
jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者( ...
php form validator 下单,PHP Form表单验证:PHP form validator使_php
在php网站开发建设中,用户注册.留言是必不可少的功能,用户提交的信息数据都是通过Form表单提交,为了保证数据的完整性.安全性,PHP Form表单验证是过滤数据的首要环节,PHP对表单提交数据的验 ...
利用策略模式与装饰模式扩展JavaScript表单验证功能
tip:有问题或者需要大厂内推的+我脉脉哦:丛培森 ٩( 'ω' )و [本文源址:http://blog.csdn.net/q1056843325/article/details/55097262 ...
float js 正则验证_使用HTML和Vuejs进行表单验证
他们说大多数网络应用只是HTML表单.好吧,表单需要验证,谢天谢地,HTML5带有许多优秀的内置表单验证功能,可用于电子邮件,数字,最大值,分钟等.您甚至可以使用模式编写自己的验证规则.在本文中,我将 ...

js使用策略模式实现表单验证

使用策略模式实现表单验证

1.什么是策略模式

2.应用例子-表单验证

1.把策略准备好，策略就是校验规则

2.再写一个Context

3.业务代码

js使用策略模式实现表单验证相关推荐

最新文章

热门文章