Angular.js 是一款非常流行的前端框架，它提供了很多方便的功能和工具来帮助开发者构建高效、优雅和易于维护的单页应用（SPA）。其中，表单数据校验是一个非常重要的功能，可以保证用户输入的数据符合预期的格式和规范，提高应用的可靠性和用户体验。
本文将介绍 Angular.js 中如何实现表单数据校验，并提供一些实用的示例代码和建议，帮助读者更好地理解和应用这个功能。
表单数据校验的基本原理
表单数据校验的基本原理是通过在用户输入数据的过程中，对数据进行实时的验证和反馈，告知用户输入是否合法，如果不合法，则给出错误提示，防止用户提交错误的数据。
在 Angular.js 中，表单数据校验可以通过 ng-model 指令、 ng-required 指令、 ng-pattern 指令等实现。具体来说，可以按照以下步骤进行表单数据校验：
在表单元素中添加
ng-model指令，用来绑定表单数据和作用域中的变量。在表单元素中添加
ng-required指令，用来指定表单元素是否必填。在表单元素中添加
ng-pattern指令，用来指定表单元素的数据格式和规范。在表单元素的下方添加错误提示信息，当表单数据不合法时，显示此错误提示信息。
在表单元素的父级元素上添加
ng-class指令，用来控制错误提示信息的显示和隐藏。
下面是一个示例代码，演示如何实现表单数据校验：
-- -------------------- ---- -------
----- ------------- -------------------------
-----
------ ----------------------
------ ----------- --------- ----------- -------------------- ------------------ ---------------------------
---- ------------------------------------ -- --------------------------------------------
------
-----
------ ---------------------
------ ------------- -------- ---------- ------------------- ------------------ -------------------------
---- ----------------------------------- -- -----------------------------------------
------
------- -------------------------
-------在上面的示例代码中，我们定义了一个表单，包含了两个输入框，分别是姓名和年龄。对于姓名输入框，我们要求用户输入合法的英文字母，对于年龄输入框，我们要求用户输入合法的年龄（1-99）。如果用户输入不符合要求，则会显示相应的错误提示信息。
表单数据校验的进阶应用
除了基本的表单数据校验外，Angular.js 还提供了一些进阶的应用，帮助开发者更好地控制表单数据的校验和反馈。
自定义校验器
有时候，我们需要自定义一些校验规则，来满足特定的业务需求。在 Angular.js 中，可以通过自定义校验器来实现这个功能。
自定义校验器的基本原理是在作用域中定义一个校验函数，然后将此函数绑定到表单元素上，实现自定义的校验逻辑。具体来说，可以按照以下步骤进行自定义校验器的实现：
在作用域中定义一个校验函数，该函数接收一个参数，即表单元素的值，返回一个布尔值，表示该值是否合法。
在表单元素中添加
ng-model指令，用来绑定表单数据和作用域中的变量。在表单元素中添加
ng-required指令，用来指定表单元素是否必填。在表单元素中添加
ng-pattern指令，用来指定表单元素的数据格式和规范。在表单元素的下方添加错误提示信息，当表单数据不合法时，显示此错误提示信息。
在表单元素的父级元素上添加
ng-class指令，用来控制错误提示信息的显示和隐藏。
下面是一个示例代码，演示如何实现自定义校验器：
<form name="myForm" ng-submit="submitForm()">
<div>
<label for="phone">电话号码：</label>
<input type="text" id="phone" name="phone" ng-model="user.phone" ng-required="true" ng-pattern="/^\d{11}$/" ng-valid-phone>
<div ng-show="myForm.phone.$error.required || myForm.phone.$error.pattern || myForm.phone.$error.phone">请输入合法的电话号码</div>
</div>
<button type="submit">提交</button>
</form>在上面的示例代码中，我们定义了一个表单，包含了一个电话号码输入框。我们希望用户输入的电话号码符合特定的格式，比如 11 位数字。为了实现这个功能，我们定义了一个自定义校验器 ng-valid-phone，用来验证电话号码是否合法。在校验函数中，我们使用正则表达式来判断电话号码是否符合要求。如果不符合要求，则返回 false，否则返回 true。
异步校验器
有时候，我们需要进行一些异步的校验操作，比如从服务器端获取一些数据，然后判断用户输入的数据是否符合预期。在 Angular.js 中，可以通过异步校验器来实现这个功能。
异步校验器的基本原理是在作用域中定义一个异步校验函数，该函数接收一个参数，即表单元素的值，返回一个 Promise 对象，表示异步校验的结果。当 Promise 对象 resolve 时，表示校验通过，当 Promise 对象 reject 时，表示校验失败。
具体来说，可以按照以下步骤进行异步校验器的实现：
在作用域中定义一个异步校验函数，该函数接收一个参数，即表单元素的值，返回一个 Promise 对象，表示异步校验的结果。
在表单元素中添加
ng-model指令，用来绑定表单数据和作用域中的变量。在表单元素中添加
ng-required指令，用来指定表单元素是否必填。在表单元素中添加
ng-pattern指令，用来指定表单元素的数据格式和规范。在表单元素的下方添加错误提示信息，当表单数据不合法时，显示此错误提示信息。
在表单元素的父级元素上添加
ng-class指令，用来控制错误提示信息的显示和隐藏。
下面是一个示例代码，演示如何实现异步校验器：
<form name="myForm" ng-submit="submitForm()">
<div>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" ng-model="user.email" ng-required="true" ng-pattern="/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/" ng-async-email>
<div ng-show="myForm.email.$error.required || myForm.email.$error.pattern || myForm.email.$error.asyncEmail">请输入合法的邮箱</div>
</div>
<button type="submit">提交</button>
</form>在上面的示例代码中，我们定义了一个表单，包含了一个邮箱输入框。我们希望用户输入的邮箱符合特定的格式，并且在服务器端进行验证，确保该邮箱不存在。为了实现这个功能，我们定义了一个异步校验器 ng-async-email，用来验证邮箱是否合法。在校验函数中，我们使用 $http 服务向服务器端发送请求，然后判断返回的结果是否符合要求。如果符合要求，则返回 resolve，否则返回 reject。
总结
表单数据校验是 Angular.js 中非常重要的一个功能，它可以保证用户输入的数据符合预期的格式和规范，提高应用的可靠性和用户体验。本文介绍了 Angular.js 中如何实现表单数据校验，包括基本的校验方法、自定义校验器和异步校验器等。希望本文对读者理解和应用 Angular.js 表单数据校验功能有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c58332add4f0e0ff00df4b