Angular-Validator 是一个用于 AngularJS 应用程序的验证器库，可以方便地对表单进行数据校验。本文将介绍如何使用该 npm 包。
安装
在命令行中输入以下代码即可安装 angular-validator：
npm install angular-validator
引入
在 HTML 文件中引入 angular-validator：
<script src="node_modules/angular-validator/angular-validator.min.js"></script>
并添加 ngValidator 模块作为 AngularJS 的依赖：
angular.module('myApp', ['ngValidator']);使用
基本用法
要在表单中使用 angular-validator，需要在表单元素上添加 validator 属性。例如，要验证一个输入框，可以添加以下代码：
<input type="text" name="name" validator="required" ng-model="model.name">
这里我们使用了 required 验证器，它会检查输入框是否为空。如果输入框为空，将会显示“此项必填”的错误信息。
组合验证器
可以在一个输入框上同时使用多个验证器，只需用逗号分隔即可。例如：
<input type="text" name="age" validator="required,number,min:18" ng-model="model.age">
这里我们使用了三个不同的验证器：required（必填）、number（数字）和 min（最小值）。如果输入框为空、输入的不是数字或者小于 18 岁，将会显示相应的错误信息。
自定义错误消息
可以通过 message 属性来自定义错误消息。例如：
<input type="text" name="email" validator="required,email" message="{required:'请输入邮箱地址', email:'请输入正确的邮箱地址'}" ng-model="model.email">这里我们使用了 required 和 email 两个验证器，并为它们分别指定了自定义的错误消息。
自定义验证器
如果内置的验证器无法满足需求，可以自定义一个验证器。首先，需要在 AngularJS 中定义一个新的 directive，然后使用 validator 方法将其注册到 angular-validator 中。例如：
-- -------------------- ---- -------
---------------------------------------------------- ---------- -
------ -
-------- ----------
----- --------------- -------- ------ -------- -
-------------------------- - -------------------- ---------- -
--- ----- - ---------- -- ----------
------ ----- -- ------------ - -- -- -------
--
-
--
---
---------------------------------------------------------- -
------------------------------------- ---------- -
------ -
--------- ----
-------- -----------
----- --------------- -------- ------ -------- -
-- ---------- -------
-------------------------- - -------------------- ---------- -
--- ----- - ---------- -- ----------
------ ----- -- ------------ - -- -- -------
--
-
--
---
---然后，在 HTML 文件中就可以像使用内置验证器一样使用这个自定义的验证器了：
<input type="text" name="username" validator="custom" ng-model="model.username">
总结
Angular-Validator 是一个非常方便的 AngularJS 表单验证器库，可以轻松地对表单进行数据校验。本文介绍了其基本用法、组合验证器、自定义错误消息和自定义验证器等功能，希望能够帮助各位前端开发者更好地使用该 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/37718