前言
在前端开发中，表单验证是必不可少的一个环节。有时候为了达到好的用户体验，我们需要在用户填写的时候及时提醒其填写错误的地方，这就需要我们用到动态验证。ng-auto-validate 是一个 AngularJS 表单验证插件，它可以轻松地完成这个任务。本文将介绍如何使用该插件。
安装
可以通过 npm 来安装 ng-auto-validate，在命令行输入以下命令即可：
npm install ng-auto-validate --save
使用
在 AngularJS 的应用中，我们需要将 ngAutoValidate 作为依赖注入到模块中。在模块的定义中添加对 ngAutoValidate 的依赖即可：
angular.module('myApp', ['ngAutoValidate']);在模板表单中，我们可以通过在 input 标签上添加 validate 属性来指定需要验证的规则，例如：
<form name="myForm" auto-validate>
<input name="email" type="email" validate="{required: true, email: true}">
<input name="password" type="password" validate="{required: true, minlength: 6, maxlength: 20}">
<button type="submit">提交</button>
</form>这里的 validate 属性是一个 AngularJS 表达式，指定了需要验证的规则。要注意的是，不同的验证规则之间需要用逗号分隔。
在控制器中，我们可以监听表单验证事件，例如：
angular.module('myApp').controller('MyCtrl', function($scope) {
$scope.$on('validate:error', function() {
console.log('表单验证失败');
});
$scope.$on('validate:success', function() {
console.log('表单验证成功');
});
});这里的 validate:error 和 validate:success 是 ngAutoValidate 模块定义的事件，分别表示表单验证失败和成功。
自定义规则
ng-auto-validate 提供了一种简单的方式来自定义验证规则。我们可以通过 $autoValidateProvider.provider 方法来获取 ngAutoValidate 的配置对象，并调用其 addValidator 方法来添加自定义验证规则。例如：
angular.module('myApp', ['ngAutoValidate']).config(function($autoValidateProvider) {
$autoValidateProvider.addValidator('mustinclude', function(value, $scope, param) {
return value && value.indexOf(param) > -1;
}, '输入内容必须包含 "{{param}}"');
});这里我添加了一个名为 mustinclude 的验证规则，并设置其错误提示信息。在模板表单中我们就可以使用该规则进行验证了：
<form name="myForm" auto-validate>
<input name="username" type="text" validate="{required: true, mustinclude: '123'}">
<button type="submit">提交</button>
</form>示例代码
-- -------------------- ---- -------
--------- -----
----- ---------------
------
----- ----------------
-------------------------------
------- -----------------------------------------------------------------------
------- ------------------------------------------------------------------
------- -------------------------------------------------------------------------------------------------
----- ----------------------------------------------------------------------------------------- -----------------
------- ----------------------------------------------------------------------------------------
----- ------------------------------------------------------------------------------- -----------------
------- --------------------------------------------------------------------------------------
------- --------------------------
-------
---------------- -
------------- ----
-
--------
-------
----- -----------------------
----- ------------- --------------
------ ------------ ------------ -------------------- ----- ------ -------
------ --------------- --------------- -------------------- ----- ---------- -- ---------- -----
------ --------------- ----------- -------------------- ----- ------------ --------
------- -------------------------
-------
-------
--------- -------------------- ---- -------
----------------------- ---------------------------------------------------------- -
------------------------------------------------- --------------- ------- ------ -
------ ----- -- -------------------- - ---
-- --------- --------------
----------------------- ---------------- -
---------------------------- ---------- -
----------------------
---
------------------------------ ---------- -
----------------------
---
---总结
ng-auto-validate 是一个非常实用的 AngularJS 表单验证插件，它能轻松地完成动态验证任务。在开发中，我们可以使用该插件提升表单验证的效率和体验。本文对该插件的安装和使用进行简单的介绍，并提供了一个示例代码供参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551d781e8991b448cf419