js 策略模式 实现表单验证
策略模式
简单点说就是:实现目标的方式有很多种,你可以根据自己身情况选一个方法来实现目标.
所以至少有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/
js 策略模式 实现表单验证的更多相关文章
- 使用JavaScript策略模式校验表单
表单校验 Web项目中,登录,注册等等功能都需要表单提交,当把用户的数据提交给后台之前,前端一般要做一些力所能及的校验,比如是否填写,填写的长度,密码是否符合规范等等,前端校验可以避免提交不合规范的表 ...
- jquery.validate.js使用之自定义表单验证规则
jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则 jquery.validate.js演示查看 jquery validate强大的jquery表单验证插件 ...
- JS组件系列——Form表单验证神器： BootstrapValidator
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
- 关于JS中的常用表单验证+正则表达式
一.非空验证 trim:去空格(去掉前后的空格),任何字符串都可以用这个方法.写法为:if(v.trim().length==0),表示如果去掉空格后的字符串的长度为0. <body> & ...
- JavaScript设计模式 - 策略模式(表单验证)
表单提交的时候,总是要校验,不同的表单可能校验相同的功能. 为了避免代码重复的复制黏贴,使用策略模式,写出来的代码赏心悦目,且可扩展,还可以作为插件到处使用 <!DOCTYPE html> ...
- 微信小程序之表单验证
表单验证 何为表单验证呢? 百度百科给出的回答是这样的: 表单验证是javascript中的高级选项之一.JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证 [ ...
- jQuery表单验证组件BootstrapValidator
github:https://github.com/nghuuphuoc/bootstrapvalidator 参考博客:JS组件系列——Form表单验证神器: BootstrapValidator ...
- summernote富文本编辑器配合validate表单验证无法进行表单提交的问题
1.使用summernote富文本编辑器提交图片到服务器 在使用bootstrap中,我们用到了summernote富文本编辑器,使用summernote将图片上传到服务器中,参考我的上篇文章http ...
- jquery.validation.js 表单验证
jquery.validation.js 表单验证 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...
随机推荐
- UglifyJs打包压缩问题引起的思考
问题背景 最近做了一个webapp项目,qa用手机测试功能时,在iphone6plus上表现是白屏,其他手机目测是ok的:因为之前在测试其他项目时也发现在这个iphone6上表现与其他手机不太一样.于 ...
- xampp运行MySQL shutdown unexpectedly解决方案
昨天晚上自己的网站突然打不开了,以为被人黑了.想想不应该啊,这小站不会有人关注的,于是登录服务器看了下,发现是Mysql打不开了 很奇怪,因为今天白天还是可以打开的,下班后也没有碰过服务器 首先看看是 ...
- CAS单点登录原理简单介绍
1. SSO简介 1.1 单点登录定义 单点登录(Single sign on),英文名称缩写SSO,SSO的意思就是在多系统的环境中,登录单方系统,就可以在不用再次登录的情况下访问相关受信任的系统. ...
- IDEA整合Junit详细步骤
一.添加Junit插件. 1.file-->setting-->plugins-->搜索Junit-->安装插件(一般已默认安装,无需手动安装). 二.设置Junit测试参数: ...
- shell运算符与流程控制-2
1.shell运算符 1.1.算数运算符 原生的bash不支持算数运算,可以通过其它方式实现例如expr. `expr a + b` #a b为数字,和运算符之间要有空格 #``不是单引号,为键盘上E ...
- 项目ITP(三) 玩玩 服务端 到 app端
前言 系列文章:[传送门] 泡泡脚,写写博客,规律生活,睡个好觉,待会看会书. 正文 上面讲了二维码生成,及 手机端扫一扫,大家有兴趣去看看. 今天我们讲一下,百度云推送平台. 每天想着问题,问题只会 ...
- 函数式编程之-Partial application
上一篇关于Currying的介绍,我们提到F#是如何做Currying变换的: let addWithThreeParameters x y z = x + y + z let intermediat ...
- MFC控件第一讲.DC编程
MFC控件第一讲.DC编程 一丶简介 什么是DC,DC有什么用. DC成为设备描述符表. DC的作用就是可以进行绘制. 比如我们的窗口都是绘制出来的. DC可以简单理解为.没一个窗口程序都有一块内存 ...
- PEB标记反调试方法
PEB标记反调试方法 一丶PEB结构简介 PEB.简称进程环境快. 我们在讲DLL隐藏的时候已经说过了. 具体博客链接: https://www.cnblogs.com/iBinary/p/96018 ...
- 【MySQL经典案例分析】关于数据行溢出由浅至深的探讨
本文由云+社区发表 一.从常见的报错说起 故事的开头我们先来看一个常见的sql报错信息: 相信对于这类报错大家一定遇到过很多次了,特别对于OMG这种已内容生产为主要工作核心的BG,在内容线的存 ...