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 ...
随机推荐
- 解决element-ui的el-select组件文字超过宽度时不出现横向滚动条问题
我用的element-ui是V1.4.3. 目前遇到一个问题,在用el-select组件的时候,当选项的内容很长的时候,会撑开下拉菜单的宽度,这样影响美观.具体如下图所示: 解决这个问题的思路:设置下 ...
- Loading加载页面
一般页面有四种情况 加载中 :就是滚动页面,后台获取加载的数据,每个页面的数据不同所以就让子类来实现,直接抽象abstract了. 加载失败 :一般都需要点击后重新加载 空页面 :也需要点击后重新加载 ...
- maven——依赖管理
管理包依赖是 Maven 核心功能之一,下面通过如何引入 jar 包:如何解析 jar 包依赖:包冲突是如何产生:如何解决包冲突:依赖管理解决什么问题:什么是依赖范围:使用包依赖的最佳实践等 6 个问 ...
- maven(一)：是否有必要使用maven
以下是普通项目和maven项目 分别引入spring core模块的区别 1,假设我们有十个项目,都需要引入spring core模块,那么需要十份重复的Spring core.jar和commons ...
- 03-openldap服务端安装配置
openldap服务端安装配置 阅读目录 基础环境准备 安装openldap服务端 初始化openldap配置 启动OpenLDAP 重新生成配置文件信息 规划OpenLDAP目录树组织架构 使用GU ...
- 【第一章】zabbix3.4监控WindowsCPU使用率磁盘IO磁盘事件日志监控阈值邮件报警详细配置
Windows安装zabbix-agent 监控Windows-CPU使用率 监控Windows-磁盘IO性能监控 监控Windows/Linux-磁盘触发器阈值更改 监控Windows-网卡自动发现 ...
- 服务器较稳妥的磁盘阵列方案：RAID5+热备盘
最近公司这边要整个数据中心,但是我们这边磁盘阵列的方案选择方面需要做好万全的测试 内部测试的服务器当初损坏的磁盘1个做的raid5直接换个新磁盘做替换rebuild就行了 但是现在想的方法是5+1的方 ...
- Django框架的使用教程--视图和路由[二]
视图和路由 1.创建一个django_test应用 2.setting中设置django_test INSTALLED_APPS = [ 'django.contrib.admin', 'django ...
- 怎样将本地web项目部署到腾讯云服务器上?
怎样将本地web项目部署到腾讯云服务器上? 1.本地计算机的工作: (1).用eclipse新建一个web项目,然后在webcontent下新建一个index.html,然后在本地部署到Tomcat服 ...
- 寒假训练——搜索 G - Xor-Paths
There is a rectangular grid of size n×mn×m . Each cell has a number written on it; the number on the ...