在 AngularJS 中，内置了一些常用的表单验证指令，例如 required、minlength、maxlength 等等。但是，对于一些独特的表单验证需求，我们可能需要自定义验证指令来完成验证。
为什么需要自定义验证指令
在某些业务场景中，我们需要对表单域进行一些特殊的验证，而 AngularJS 内置的验证指令可能无法满足我们的需求。例如，我们需要检查一个输入框中输入的字符串是否是手机号码格式。此时，我们就需要自定义验证指令来完成。
自定义验证指令详解
AngularJS 中的自定义验证指令有三个部分：
- 指令名称
- 指令对象
- 指令链接函数
指令名称
自定义验证指令名称需要以 ng 开头，后面接驼峰式命名的指令名称。例如，我们要创建一个检查手机号码格式的验证指令，指令名称可以定义为 ngPhoneFormat。
指令对象
指令对象是我们自定义验证指令的核心，它是一个 JavaScript 对象，可以通过 angular.module() 方法中的 directive() 函数创建。
指令对象需要包含以下属性：
restrict：指定指令在 HTML 中的使用方式。通常使用A（属性）表示该指令是一个 DOM 属性指令，将指令绑定到 DOM 元素上。require：指定需要使用该指令的元素需要满足其他指令的条件。在这里，我们需要使用内置的ngModel指令来获取输入框的值。link：指定指令的链接函数，用来实现自定义的验证逻辑。
以下是一个创建自定义验证指令的示例代码：
-------------------------------------------------- ---------- -
------ -
--------- ----
-------- ----------
----- --------------- -------- ------ ------------ -
-- ----- ----------
-
--
---指令链接函数
指令链接函数是我们自定义验证指令中最重要的部分，它用来实现自定义的验证逻辑。链接函数接收四个参数，分别是：
scope：当前作用域。element：当前元素。attrs：当前元素的属性（包含指令绑定的属性）。ngModelCtrl：与当前输入框关联的 ngModel 控制器。
在指令链接函数中，我们需要实现以下逻辑：
- 监听表单域的输入变化，如果表单域的值发生变化则触发验证逻辑。
- 实现验证逻辑，如果输入合法则返回
true，否则返回false。 - 通过 ngModel 控制器的
$setValidity()方法将验证结果映射到视图中。
以下是一个检查手机号码格式的自定义验证指令的示例代码：
-------------------------------------------------- ---------- -
------ -
--------- ----
-------- ----------
----- --------------- -------- ------ ------------ -
-- --------
------------------- ---------- -
--- ----- - --------------
-- --------
--- ------- - ------------------------
-- -----------
--------------------------------- ---------
---------------
---
-
--
---在上面的代码中，我们监听输入框的变化，调用正则表达式检查输入值是否符合手机号码格式，并通过 $setValidity() 方法将验证结果映射到视图中。
自定义验证指令的使用方法
在 HTML 中使用自定义验证指令非常简单，只需要将自定义指令名称作为属性绑定到表单域上即可。例如，在一个包含手机号码输入框的表单中，我们可以直接使用 ng-phone-format 指令进行验证。
------
------ ----------- ---------------------- --------------- --
------- -------------------------
-------在表单中添加了 ng-phone-format 指令后，AngularJS 会自动执行指令中实现的验证逻辑，并通过 $setValidity() 方法将验证结果映射到视图中。
总结
自定义验证指令是 AngularJS 中的一个强大的功能，它可以帮助我们方便地实现特殊的表单域验证功能。虽然创建自定义验证指令需要一定的 JavaScript 和 AngularJS 知识，但是只要理解了自定义验证指令的基本原理，就可以快速地创建出符合自己需求的验证指令。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6451e399675af4061b59f618