在前端开发中，表单验证是一个很重要的功能。为了提高开发效率和代码的可维护性，很多团队都会选择使用一些较为成熟的前端框架来实现表单验证功能。而 AngularJS 是一个非常流行的前端框架，它提供了丰富的表单验证功能，同时也支持可重用的表单验证逻辑，本篇文章将深入介绍如何在 AngularJS 中实现可重用的表单验证。
表单验证的基本使用方式
在 AngularJS 中，表单验证可以通过在 HTML 中添加一些内置的指令来实现。例如，如果要实现一个必填项的验证，只需要在对应的 input 标签中添加 required 指令即可：
<form name="myForm"> <input type="text" name="myInput" required> <button ng-disabled="myForm.$invalid">Submit</button> </form>
这个例子中，我们使用了 AngularJS 内置的 required 指令来要求用户必须填写 myInput 字段。同时，我们还使用了 ng-disabled 指令来禁用按钮，当表单不合法时，按钮将被禁用。
AngularJS 还提供了一些其它的内置指令，例如 maxlength、minlength、pattern 等，可以用于验证输入的长度、格式等等。更详细的表单验证指令可以查看官方文档 AngularJS Forms。
实现可重用的表单验证
上面介绍的表单验证方式可以满足大部分的需求，但如果要实现较为复杂的表单验证逻辑，我们就需要更加灵活和可重用的方式来实现表单验证。在 AngularJS 中，可以通过自定义指令来实现可重用的表单验证逻辑。
下面是一个例子：我们要实现一个验证两个输入框是否相等的表单验证逻辑。首先，我们定义一个名为 equals 的自定义指令：
-- -------------------- ---- -------
----------------------- ---------- -
------ -
--------- ----
-------- ----------
----- --------------- ----- ------ ----- -
----- ---------- - --------------------------------------
----------------------- - -------------------- ---------- -
------ --------- --- -----------------
--
------------------------------------ ---------- -
-----------------
---
-
--
---值得注意的是，这个自定义指令需要 require ngModel 指令，这样我们才能访问到当前输入框的模型，并将表单验证结果存储在 $validators 对象中。
然后，我们在 HTML 中使用这个自定义指令：
<form name="myForm"> <input type="text" name="password" ng-model="password" required> <input type="text" name="passwordConfirm" ng-model="passwordConfirm" equals="password" required> <button ng-disabled="myForm.$invalid">Submit</button> </form>
这个例子中，我们在 passwordConfirm 输入框中使用了 equals 指令，并将另一个输入框的 id 传递给了这个指令。当用户在这两个输入框中输入不同的内容时，表单将无法提交。
总结
AngularJS 提供了非常丰富和灵活的表单验证功能，开发者可以根据自身的需求，灵活地使用内置指令或自定义指令来实现表单验证逻辑。在实现表单验证时，我们可以借鉴上面的例子，将常用的验证逻辑封装为自定义指令，提高代码的重用性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e70fc1f6b2d6eab326935a