前言
HTML5 发展蓬勃,提供越来越多属性帮助开发者方便调用浏览器的各种功能,但这是在用户面前的浏览器也越来越新的前提下。
现实往往事与愿违,前端工程面对很多的开发问题,其中一大部分总和兼容性的处理脱不开关系。
再比如表单验证,各种 input
的 type
在最新的浏览器中浏览器本身就会因为用户填入了文字而 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 胡椒)
技术发展迭代很快,所以这些笔记内容也有类似新闻的时效性,不免有过时、或者错误的地方,欢迎指正 ^_^。
BEST
Lien(A.K.A 胡椒)