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 ...
随机推荐
- 【 js 工具 】如何使用Git上传本地项目到github?(mac版)
在此假设你已经在 github 上创建好了一个项目,像这样: 并且你已经完成了自己的项目代码, 同时你也已经安装了 git,然后 let's start. 首先,建一个文件夹比如文中演示的是 微信小程 ...
- python爬虫入门---第四篇：网站对爬虫的限制及突破测试
大部分网站对网络爬虫都有限制,限制方式有两种: 一.Robots协议:二.网站通过判断对网站访问http的头部信息来查看是否是爬虫,并对爬虫做相关拦截 第一种限制是书面限制,第二种是强制性阻拦限制.那 ...
- postgresql-10.1-3-windows-x64 安装之后,起动pgAdmin 4问题(win10)
运行pgAdmin出现”pgAdmin 4 the application server could not be contant“ 窗口. 参考:https://stackoverflow.com ...
- 卷积神经网络CNNs的理解与体会
https://blog.csdn.net/shijing_0214/article/details/53143393 孔子说过,温故而知新,时隔俩月再重看CNNs,当时不太了解的地方,又有了新的理解 ...
- 异步陷阱之IO篇
很多教程和资料都强调流畅的用户体验需要异步来辅助,核心思想就是保证用户前端的交互永远有最高的优先级,让一切费时的逻辑通通放到后台,等到诸事完备,通知一下前端给个提示或者继续下一步.随着.NET发展,a ...
- Elasticsearch5.4署遇到的问题
问题一 can not run elasticsearch as root Elastic 不建议通过root用户启动ES服务器,如果非要用root启动,可以在config/jvm.options配置 ...
- mysqlclient and mysql-python安装出错方法
Collecting mysql-python Using cached https://files.pythonhosted.org/packages/a5/e9/51b544da85a36a68d ...
- [20180317]12c TABLE ACCESS BY INDEX ROWID BATCHED2.txt
[20180317]12c TABLE ACCESS BY INDEX ROWID BATCHED2.txt --//简单探究12c TABLE ACCESS BY INDEX ROWID BATCH ...
- Apache与Tomcat有什么关系和区别
Apache 和 Tomcat 都是web网络服务器,两者既有联系又有区别,在进行HTML.PHP.JSP.Perl等开发过程中,需要准确掌握其各自特点,选择最佳的服务器配置. Apache是web服 ...
- 洗礼灵魂，修炼python（9）--灵性的字符串
python几大核心之——字符串 1.什么是字符串 其实前面说到数据类型时说过了,就是带有引号的参数,“”引号内的一切东西就是字符串,字符串又叫文本. 2.创建字符串的两种方式: 3.字符串的方法: ...