在前端开发中，表单验证是必不可少的一部分。但是，随着业务场景的变化和需求的增加，仅使用基础的表单验证规则已经无法满足客户端的需求。本文将介绍如何利用策略模式和装饰模式扩展 JavaScript 表单验证功能。
策略模式
策略模式是一种行为设计模式，它允许你定义一系列算法，将每个算法都封装起来，并使它们可以相互替换。通过这种方式，可以在运行时选择算法的行为。
在表单验证中，我们可以将每个验证规则视为一个算法，例如邮箱格式验证、手机号码格式验证等。为了实现策略模式，我们需要定义一个 Validator 类，其中包含一个 validate 方法和一个 setValidation 方法：
-- -------------------- ---- -------
----- --------- -
------------- -
---------------- - ---
-
------------------------- -
----------------------------------
-
--------------- -
--- ---- - - -- - - ------------------------ ---- -
----- ---------- - --------------------
-- ---------------------------- -
------ ------
-
-
------ -----
-
-
在上面的代码中，Validator 类包含一个 validations 数组，我们可以将验证规则添加到该数组中。validate 方法接收一个值作为参数，并遍历 validations 数组执行每个验证规则，如果所有验证规则均返回 true，则 validate 返回 true；否则返回 false。
现在，我们可以定义一些验证规则，例如：
-- -------------------- ---- ------- ----- --------------- - - -------- ------- -- ----------------------------------------------- ------------- ------------- -- ----- --------------- - - -------- ------- -- ------------------------------- ------------- ------------- --
emailValidation 和 phoneValidation 对象包含 isValid 和 errorMessage 两个属性。isValid 属性包含用于验证表单输入的正则表达式，errorMessage 属性则包含用于显示错误消息的文本字符串。
下面是如何将这些验证规则添加到 Validator 类中的示例代码：
-- -------------------- ---- ------- ----- --------- - --- ------------ ----------------------------------------- ----------------------------------------- -- --------------- ----- ----- - --------------------------------------- -- ---------------------------- - ------------------------------- -
装饰模式
装饰模式是一种结构性设计模式，它允许你通过将对象放入包装器中来动态更改对象的行为。装饰模式与继承有些相似，但它形成了一条链，可以动态地添加、删除或更改对象的行为，而不影响其他部分。
在表单验证中，我们可以使用装饰模式来动态地添加验证规则。假设我们的表单已经包含了一些基本的验证规则，例如必填字段验证、最小长度验证等。为了实现装饰模式，我们需要定义一个 Decorator 类，其中包含一个 validate 方法和一个 setValidation 方法：
-- -------------------- ---- -------
----- --------- -
----------------------- -
--------------- - -----------
-
------------------------- -
--------------- - -----------
-
--------------- -
-- --------------------------------- -
------ ------
-
------ -----
-
-在上面的代码中，Decorator 类包含一个 validation 属性，它表示要添加的验证规则。setValidation 方法用于设置或更改验证规则。validate 方法首先执行基础的验证规则，然后再执行添加的验证规则。
现在，我们可以定义一些装饰器，例如：
const > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/2135) ，转载请注明来源 [https://www.javascriptcn.com/post/2135](https://www.javascriptcn.com/post/2135)