笔记:使用 JavaScript 设计模式-策略模式进行表单验证


前言

HTML5 发展蓬勃,提供越来越多属性帮助开发者方便调用浏览器的各种功能,但这是在用户面前的浏览器也越来越新的前提下。

现实往往事与愿违,前端工程面对很多的开发问题,其中一大部分总和兼容性的处理脱不开关系。

再比如表单验证,各种 inputtype 在最新的浏览器中浏览器本身就会因为用户填入了文字而 type 应该是 number 来提示用户输入内容的错误;或者 required 属性在低级别浏览器的支持情况和需求、实际开发场景里是否适合使用。所以更多的场景下还是会使用 JavaScript 来处理表单的验证,不因为没有兼容问题,但在这个场景下会少很多。

最近开设计模式的时候,读到使用策略模式进行表单验证的方法,自己在项目中实践了一把,真的非常好用,所以把关键的内容抽象出来整理了一番。

Validator 对象本身的封装:

Validator 就是一个策略的决策者,本身之暴露两个方法,一个 selectValidator(),作为策略的决策者,可以选择一个策略,在验证表单的情况里就是选择一个验证方式。暴露的第二个方法是 validate() 方法:通过上一步选择了的验证方式(当前的策略),去验证需要验证的值。

被选择的策略 validator:

比如说需要验证电话号码和邮箱地址的合法性(具体的验证不会这么简单,这里只是个例子)

那比方说我们获取到一个 input 里填入的值了,具体的验证就是:

在实际的项目中的封装不会这么简单,可能会考虑添加一个 chain,在每步 return this;或者保存一个内部变量 this.validateResult 配合传入回调,针对是否合法来做相应操作。

感谢阅读

你们好, 2018 年初把小站从 Jekyll 迁移到 Hugo 的过程中,删除了评论区放的 Disqus 插件,考虑有二:首先无论评论、还是对笔记内容的进一步讨论,读者们更喜欢通过邮件、或者 Twitter 私信的方式来沟通;其次一年多以来 Disqus 后台能看到几乎都是垃圾留言(spam),所以这里直接贴一下邮件、以及 Twitter 账户 地址。

技术发展迭代很快,所以这些笔记内容也有类似新闻的时效性,不免有过时、或者错误的地方,欢迎指正 ^_^。

BEST
Lien(A.K.A 胡椒)
本站总访问量 本站总访客量 本文总阅读量