从表单校验看JavaScript策略模式的使用详解


Posted in Javascript onOctober 17, 2020

众所周知的是,表单确实在前端,唔,或者说在网页中占有不小的比重。事实上,几乎每一个中大型网站都会有“登录注册”以验证用户信息、防止一些不可名状的隐患。。。

那么表单的优劣就成了前端开发者急需解决的问题。其实我更愿意称为“代码的可读性”或“可复用性”以及“是否冗杂”。

表单也有“优劣”?你在开玩笑嘛?
我想你可以认真看下下面的代码,它用到了一些“新知识”:

<form action="xxx" id="registerForm">
	请输入用户名:<input type="text" name="userName" id="name" />
	请输入密码:<input type="text" name="password" id="pass" />
	请输入手机号:<input type="text" name="phoneNumber" id="phone" />
	<button>提交</button>
</form>

用户名、密码、手机号这应该是表单中最常见的了,好,我们就以此分析!

上面这些只是简单的演示效果,你完全可以用css的valid/invalid、HTML5的required/pattern来配合完成。

<script>
	var registerForm=document.getElementById('registerForm')
	registerForm.onsubmit=function(){
		if(registerForm.userName.value==''){
			document.getElementById("name").setCustomValidity('用户名不能为空');
			return false;
		}
		if(registerForm.password.value.length<6){
			document.getElementById("pass").setCustomValidity('密码长度不能少于6位');
			return false;
		}
		if(!/(^1[3|5|8][0-9]{9}$)/.test(registerForm.phoneNumber.value)){
			document.getElementById("phone").setCustomValidity('手机号码格式不正确');
			return false;
		}
	}
</script>

但即使这样,你也不会觉得它很完美 —— 现在表单只有三条,如果某一天它增加到了N条,即使是「复制粘贴」也拯救不了你!

就在这时,你想到了 策略模式 (看,JS总是会让你“灵光一现”)
说起策略模式,很自然地,要遵循 暴露接口和实现逻辑分离 的原则。

策略模式指的是定义一系列的算法,把它们一个个封装起来。将不变的部分和变化的部分隔开是每个设计模式的主题,策略模式也不例外,策略模式的目的就是将算法的使用与算法的实现分离开来
一个基于策略模式的程序至少由两部分组成。第一个部分是一组策略类,策略类封装了具体的算法,并负责具体的计算过程。第二个部分是环境类 Context,Context 接受客户的请求,随后把请求委托给某一个策略类。要做到这点,说明 Context 中要维持对某个策略对象的引用
——《JavaScript设计模式与开发实践》

那么,第一步我们很显然要把这些校验逻辑都封装成【策略对象】:

var strategies={
	isNoneEmpty:function(value,errorMsg){
		if(value===''){
			return errorMsg;
		}
	},
	minLength:function(value,length,errorMsg){
		if(value.length<length){
			return errorMsg;
		}
	},
	isMobile:function(value,errorMsg){
		if(!/(^1[3|5|8][0-9]{9}$)/.test(value)){
			return errorMsg;
		}
	}
};

接下来我们要实现一个“暴露出去的”、“作为调用的”方法类 —— 它将作为context(上下文),负责接收用户的请求并委托给验证对象stratrgies:

var Validator=function(){
	this.cache=[]; //用于保存接收到的校验规则
};
Validator.prototype.add=function(dom,rule,errorMsg){
	var ary=rule.split(':');
	this.cache.push(function(){
		var strategy=ary.shift();
		ary.unshift(dom.value);
		ary.push(errorMsg);
		return strategies[strategy].apply(dom,ary); //调用strategies对象的指定方法对象,并规定在函数对象内部this指向dom元素,ary作为参数传入
	});
};
Validator.prototype.start=function(){
	for(var i=0,validatorFunc;validatorFunc=this.cache[i++];){
		var msg=validatorFunc();
		if(msg){
			return msg;
		}
	}
}

使用:

var validataFunc=function(){
	var validator=new Validator();
	
	//添加校验规则
	validator.add(registerForm.userName,'isNoneEmpty','用户名不能为空');
	validator.add(registerForm.password,'minLength:6','密码长度不能少于6位');
	validator.add(registerForm.phoneNumber,'isMobile','手机号码格式不正确');
	
	var errMsg=validator.start(); //获得校验结果
	return errorMsg; //返回
}

var registerForm=document.getElementById('registerForm')
registerForm.onsubmit=function(){
	var errorMsg=validataFunc();
	if(errorMsg){
		//触发错误提示
		return false; //并阻止表单提交
	}
}

我们可以看到的是:当我们往 validator 对象里添加完一系列的校验规则之后,会调用 validator.start() 方法来启动校验。如果 validator.start() 返回了一个确切的 errorMsg 字符串当作返回值,说明该次校验没有通过,此时需让 registerForm.onsubmit 方法返回 false 来阻止表单的提交。

这样确实比之前好很多:至少在我们修改验证规则时显得毫不费力:

validator.add(registerForm.userName,'minLength:2','用户名不能少于2位')

但是问题也就随之而来了:我们把对于用户名的验证规则“不能为空”改为了“不能少于两位”,那么就不能验证“是否为空”了。

能不能像element-ui一样可以自定义多种验证规则 呢?就像这样:

validator.add(registerForm.userName,[{
	strategy:'isNoneEmpty',
	errorMsg:'用户名不能为空'
},{
	strategy:'minLength:2',
	errorMsg:'用户名长度不能少于2位'
}])

现在“rule”是数组-对象的形式了,我们需要把add函数改一下:

Validator.prototype.add=function(dom,rules){
	var self=this;
	for(var i=0,rule;rule=rules[i++];){
		(function(rule){
			var strategyAry=rule.strategy.split(':');
			var errorMsg=rule.errorMsg;
			self.cache.push(function(){
				var strategy=strategyAry.shift();
				strategyAry.unshift(dom.value);
				return strategies[strategy].apply(dom,strategyAry);
			});
		})(rule)
	}
}

策略模式的优点

利用组合、委托、多态等技术和思想,可以有效地避免多重条件选择语句(关于这一点,笔者在 这篇文章 中做了详细说明);完美实现了设计模式都应该具有的“对外开放-封闭”原则,基于策略模式实现的规则大多易于扩展、易于使用避免了大量CV的工作

到此这篇关于从表单校验看JavaScript策略模式的使用详解的文章就介绍到这了,更多相关JavaScript策略模式使用内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js css样式操作代码(批量操作)
Oct 09 Javascript
jquery图片放大功能简单实现
Aug 01 Javascript
js获取select选中的option的text示例代码
Dec 19 Javascript
jQuery遍历json中多个map的方法
Feb 12 Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 Javascript
AngularJS基础 ng-model 指令详解及示例代码
Aug 02 Javascript
js中常用的Tab切换效果(推荐)
Aug 30 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
Apr 24 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 Javascript
利用layer实现表单完美验证的方法
Sep 26 Javascript
微信小程序利用button控制条件标签的变量问题
Mar 15 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 #Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
Oct 16 #Javascript
DWR内存兼容及无法调用问题解决方案
Oct 16 #Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 #Javascript
jQuery zTree如何改变指定节点文本样式
Oct 16 #jQuery
vue使用swiper实现左右滑动切换图片
Oct 16 #Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 #Javascript
You might like
php通用防注入程序 推荐
2011/02/26 PHP
php时间函数用法分析
2016/05/28 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
Prototype使用指南之form.js
2007/01/10 Javascript
javascript日期格式化方法汇总
2015/10/04 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
2017/07/11 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
[49:27]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第一场
2018/04/05 DOTA
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
python批量替换页眉页脚实例代码
2018/01/22 Python
python正则表达式面试题解答
2020/04/28 Python
python3 线性回归验证方法
2019/07/09 Python
Python实现屏幕录制功能的代码
2020/03/02 Python
Python3 filecmp模块测试比较文件原理解析
2020/03/23 Python
Python sklearn中的.fit与.predict的用法说明
2020/06/28 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
悬挂训练绳:TRX
2017/12/14 全球购物
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
"序列点" 是什么
2016/07/29 面试题
小区消防演习方案
2014/02/21 职场文书
幼儿教师师德承诺书
2014/05/23 职场文书
保护地球的标语
2014/06/17 职场文书
装饰公司活动策划方案
2014/08/23 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
MySQL中VARCHAR与CHAR格式数据的区别
2021/05/26 MySQL
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android
php png失真的原因及解决办法
2021/11/17 PHP
openstack云计算keystone组件工作介绍
2022/04/20 Servers