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 ...
随机推荐
- Linux环境变量详解与应用
在bash shell中,环境变量分为: >全局变量 >局部变量 全局变量,不仅对shell可见,对其子进程也可见 查看预设的全局环境变量: ghostwu@dev:~$ printenv ...
- MySql Host is blocked because of many connection errors; unblock with 'mysqladmi
原因: 同一个ip在短时间内产生太多(超过mysql数据库max_connection_errors的最大值)中断的数据库连接而导致的阻塞: 解决方法: 1.提高允许的max_connection_e ...
- demo:动态生成专属二维码
在日常生活中,随处可见二维码,那么js如何生成动态的专属二维码?其实,通过"二维码插件"我们可以快速生成二维码.在这,记录一下的生成专属二维码demo,一起来看看jquery.qr ...
- 【代码笔记】Web-HTML-表单
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 【读书笔记】iOS-UDID
UIDevice类可以返回当前iOS设备的UDID,以前开发者通常使用UDID作为识别每台设备的唯一标识,然后从iOS5开始,苹果公司将这一功能标记为废止并不推荐使用,苹果公司在iOS6之后将这个功能 ...
- SSM 开发 Tars
目录结构 tars生成的文件当成 controller 来调用 service ,service 调用 mapper POM 注意如果 mybatis是3.4.1 spring 是4.1.14的话, ...
- Git应用—03分支管理和冲突解决(转载)
Git 分支管理和冲突解决 https://www.cnblogs.com/mengdd/p/3585038.html 创建分支 git branch 没有参数,显示本地版本库中所有的本地分支名称. ...
- PullToRefreshGridView上拉刷新，下拉加载
PullToRefreshGridView上拉刷新,下拉加载 布局: <?xml version="1.0" encoding="utf-8"?> ...
- Flutter 依赖的那些事儿
Flutter 里面有2种库一样的东西, Package -creating a pure Dart component. like a new Widget. 这种是纯Dart,相当于你自己写的组件 ...
- IDEA错误：Failed to start end point associated with ProtocolHandler [http-nio-9999] java.net.BindException: Address already in use: bind
日志显示进程端口已被占用,首先需要的是查询什么进程占用了当前的9999端口. 1.win+R输入cmd进入命令界面: 2.输入命令 netstat -ano|findstr "端口号&qu ...