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

前言

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

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

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

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

Validator 对象本身的封装：

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

被选择的策略 validator：

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

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

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