在前端开发中，表单验证是非常常见的需求。而在 AngularJS 框架中，通过使用 $watch，我们可以实现非常简便的表单验证。
$watch 的作用
$watch 是 AngularJS 中的一个方法，用来监听数据的变化，并在数据变化时执行相应的操作。我们可以在控制器中使用 $watch 来监听一个变量，当这个变量发生变化时，执行相应的逻辑。
批量验证表单
在实际开发中，表单通常包含多个输入框，每个输入框都需要进行验证。如果我们一个一个地对每个输入框进行验证，会非常繁琐。而使用 $watch，我们可以实现批量验证表单。
下面是一个简单的示例，展示了如何使用 $watch 对表单进行批量验证。
----- -------------------------
-----
-------------------
------ ----------- -------------------- --
----- ---------------------- -- ----------------------------------
------
-----
------------------
------ ------------ --------------------- --
----- ---------------------- -- -----------------------------------
------
-----
------------------
------ --------------- ------------------------ --
----- ---------------------- -- -------------------------------------
------
------- -------------------------
-------在上面的示例中，我们使用 ng-show 指令来控制错误提示的显示。具体来说，当表单提交后，如果输入框的值不符合要求，就会显示相应的错误提示。
在控制器中，我们可以使用 $watch 来监听表单的状态，当表单状态发生变化时，更新 formSubmitted 变量的值。
----------------------- ---
--------------------- ---------------- -
----------- - ---
-------------------- - ------
------------------------------ ------------------ --------- -
-- --------- --- --------- -
-------------------- - ------
-
---
----------------- - ---------- -
-------------------- - -----
-- -------------------- -
-- -----------
-
--
---在上面的控制器中，我们首先定义了一个空对象 user 和一个变量 formSubmitted，用来存储表单数据和表单是否提交的状态。
然后，我们使用 $watch 来监听表单的状态变化。当表单的状态变化时，如果 formSubmitted 的值为 true，就将其设为 false。这样，当用户修正了表单中的错误后，再次提交表单时，错误提示就会重新显示。
最后，我们定义了一个 submitForm 方法，用来提交表单。在提交表单时，我们将 formSubmitted 的值设为 true，并检查表单是否通过验证。如果表单验证通过，就可以将表单数据提交到后端进行处理。
总结
通过使用 AngularJS 中的 $watch 方法，我们可以实现非常方便的表单验证。在实际开发中，我们可以根据具体需求进行相应的扩展，从而实现更加灵活和强大的表单验证功能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65f7995fd10417a2222dc1fc