JavaScript设计模式 - 策略模式(表单验证)
表单提交的时候,总是要校验,不同的表单可能校验相同的功能。
为了避免代码重复的复制黏贴,使用策略模式,写出来的代码赏心悦目,且可扩展,还可以作为插件到处使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>策略模式_表单验证</title>
</head>
<body>
<form id="registerFrom" method="post" action="">
请输入用户名: <input type="text" name="userName" /> <br/>
请输入密码: <input type="text" name="password" /> <br/>
请输入手机号码: <input type="text" name="phoneNumber" /> <br/>
<button>提交</button>
</form>
<script> // 对象字面量
var strategies = { isNonEmpty: function(value, errorMsg) {
if (value === '') {
return errorMsg;
};
}, minLength: function(value, length, errorMsg) {
if (value.length < length) {
return errorMsg;
};
}, isMobile: function(value, errorMsg) {
if (!/(^1[7|3|5|8][0-9]{9}$)/.test(value)) {
return errorMsg;
};
}, isSpace: function(value, errorMsg) {
if([...value].every( item => {
return item === ' ';
})) {
return errorMsg;
};
}
}; // 校验表单类
var Validator = function() {
this.catch = [];
}; Object.assign(Validator.prototype, { add: function(dom, rules, errorMsg) {
var _self = this;
for (var i = 0, rule; rule = rules[i ++]; ) {
(function(rule) {
var ary = rule.strategy.split(':');
_self.catch.push(function() {
var strategy = ary.shift();
ary.unshift(dom.value);
ary.push(rule.errorMsg);
return strategies[strategy].apply(dom, ary);
});
})(rule);
};
}, start: function() {
for (var i = 0, validatorFunc; validatorFunc = this.catch[i ++]; ) {
var msg = validatorFunc();
if (msg) {
return msg;
};
};
}
}); // test // 校验方法封装
var validataFunc = function() {
var validator = new Validator(); validator.add(registerFrom.userName, [{
strategy: 'isSpace',
errorMsg: '用户名不能全为空!'
},{
strategy: 'minLength:10',
errorMsg: '用户名长度不能少于10个字符!'
}]);
validator.add(registerFrom.password, [{
strategy: 'isSpace',
errorMsg: '密码不能全为空!'
},{
strategy: 'minLength:6',
errorMsg: '密码长度不能小于6个字符!'
}]);
validator.add(registerFrom.phoneNumber, [{
strategy: 'isMobile',
errorMsg: '手机号码格式不对!'
}]); var errMsg = validator.start();
return errMsg;
}; var registerFrom = document.querySelector('#registerFrom')
registerFrom.onsubmit = function() {
var errorMsg = validataFunc();
if (errorMsg) {
console.log(errorMsg);
return false;
};
};
</script>
</body>
</html>
使用对象字面量和闭包和apply来实现策略模式的,很不错
JavaScript设计模式 - 策略模式(表单验证)的更多相关文章
- javascript 设计模式-----策略模式
在<javascript设计模式>中,作者并没有向我们介绍策略模式,然而它却是一种在开发中十分常见的设计模式.最常见的就是当我们遇到一个复杂的表单验证的时候,常常需要编写一大段的if和el ...
- JavaScript：综合案例-表单验证
综合案例:表单验证 开发要求: 要求定义一个雇员信息的增加页面,例如页面名称为"emp_add.htmnl",而后在此页面中要提供有输入表单,此表单定义要求如下: .雇员编号:必须 ...
- javascript:正则表达式、一个表单验证的例子
本文内容: 正则表达式 正则表达式的使用方法 正则表达式的特殊匹配字符 正则表达式修饰符 利用正则表达式进行表单验证的例子 首发日期:2018-05-13 正则表达式: 正则表达式的使用方法: 首先创 ...
- javascript设计模式——策略模式
前面的话 在程序设计中,常常遇到类似的情况,要实现某一个功能有多种方案可以选择.比如一个压缩文件的程序,既可以选择zip算法,也可以选择gzip算法.这些算法灵活多样,而且可以随意互相替换.这种解决方 ...
- javascript设计模式-策略模式
策略模式笔记 将定义的一组算法封装起来,使其相互之间可以替换. 封装的算法具有一定独立性,不会随客户端变化而变化. 与状态模式异同? 1. 结构上看,它与状态模式很像,也是在内部封 ...
- javascript中常见的表单验证项
1.不能超过20个字符 <body> <form name=a onsubmit="return test()"> <textarea name=&q ...
- 吴裕雄--天生自然 JAVASCRIPT开发学习： 表单验证
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 15个最佳的 JavaScript 表单验证库
客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...
- jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...
随机推荐
- 前端的业余设计-about my 毕业季
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ...
- csharp: DefaultValueAttribute Class
public class CalendarEvent { public int id { get; set; } public string title { get; set; } public st ...
- Mysql数据库单表查询
1.单表查询语法 #查询数据的本质:mysql会到你本地的硬盘上找到对应的文件,然后打开文件,按照你的查询条件来找出你需要的数据.下面是完整的一个单表查询的语法 select * from,这个sel ...
- React中props和state相同点和不同点
朋友们,我想死你们了,最近这几天忙着和病魔作斗争所以没怎么写博客,今天感觉好点了,赶紧来写一波,就是这木敬业. 今天我们来讨论讨论props和state相同点和不同点 首先我来概要说明一下这两者 pr ...
- 【代码笔记】Web-JavaScript-JavaScript注释
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- MSys2安装QT5
1. MSYS2 shell # pacman –Syuu 2. Reopen MSYS2 # pacman –Syuu 3.添加国内源 msys64\etc\pacman.d 目录下有三个文件 1. ...
- MySQL InnoDB表和索引之聚簇索引与第二索引
MySQL InnoDB表和索引之聚簇索引与第二索引 By:授客QQ:1033553122 每个InnoDB表都有一个称之为聚簇索引(clustered index)的特殊索引,存储记录行数据.通常, ...
- 《Inside C#》笔记(十五) 非托管代码 上
为了保证向后兼容性,C#和.NET可以通过非托管的方式运行旧代码.非托管代码是指没有被.NET运行时管控的代码.非托管代码主要包括:平台调用服务(PlatformInvocation Services ...
- flume组件汇总 source、sink、channel
Flume Source Source类型 说明 Avro Source 支持Avro协议(实际上是Avro RPC),内置支持 Thrift Source 支持Thrift协议,内置支持 Exec ...
- JS笔记（三）：数组、函数、类
(一) 数组 //创建数组 var the_array = [1,2,3,4,'5'] console.log(the_array[0]) //读取索引为0的数据 the_array[5] = '赋值 ...