Angular-Validation 是一个用于 Angular 应用程序的轻量级表单验证库，它提供了易于使用的 API 和丰富的验证功能。在本文中，我们将学习如何使用 Angular-Validation 进行表单验证。
安装
要使用 Angular-Validation，需要先安装它。可以通过以下命令使用 npm 进行安装：
npm install angular-validation --save
此命令将 Angular-Validation 安装为项目的依赖项，并将其添加到 package.json 文件中。
导入模块
在使用 Angular-Validation 时，必须将其导入到应用程序模块中。可以使用以下命令导入模块：
import { ValidationModule } from 'angular-validation';
然后，在 @NgModule 的 imports 中添加 ValidationModule：
-- -------------------- ---- ------- ----------- -------- - -------------- ------------ ----------------- -- ------------- --------------- ---------- -------------- -- ------ ----- --------- - -展开代码
在模板中使用指令
要在模板中使用 Angular-Validation，需要将其指令添加到需要进行验证的表单元素上。以下是一些示例：
-- -------------------- ---- ------- ----- ------------------------- ----------------- ---- ------------------- ------ ------------------------- ------ ------------ ------------ ---------- ------- ------------- -------- -- ---- -------------------------------------- ---- --------------------------------------------------- -- -------------- ---- ---------------------------------------------------------- ----- ------------ ------ ------ ---- ------------------- ------ ------------------------------- ------ --------------- --------------- ------------- ------- ------------------ -- ---- ----------------------------------------- ---- --------------------------------------------------------------- ---- -- -- ----- - ---------- ---------- ------ ------ ------- ----------------------------- -------展开代码
在上面的示例中，我们向两个表单元素添加了指令。第一个元素是 email 输入框，它使用了 validateEmail 和 required 指令进行验证。如果输入框为空或者格式不正确，会显示相应的错误信息。第二个元素是 password 输入框，它使用了 validateLength 指令进行验证。如果密码长度小于 8 个字符，会显示相应的错误信息。
创建自定义验证器
如果需要创建自定义验证器，可以使用 ValidationErrors 接口来定义验证器的返回值类型。以下是一个示例：
-- -------------------- ---- ------- ------ - ---------- ---------- - ---- ---------------- ------ - -------------- ---------- ---------------- ---------------- - ---- ----------------- ------------ --------- ------------------------- ---------- - - -------- -------------- ------------ ------------- -- ----------------------- ------ ---- - - -- ------ ----- --------------------- ---------- --------- - ----------------- ----------------- ---------------- - ---- - -- ---------------- - ------ ----- -- ---------- ---- - ----- ----- - --- ---------------------- ----- -- --------------------------- - ------ ----- -- -------------- ---- - ------ - ------------ ---- -- -- ------------ - -展开代码
在上面的示例中，我们创建了一个名为 UrlValidatorDirective 的指令，并将其添加到选择器 [validateUrl][ngModel] 中。该指令使用了 NG_VALIDATORS 提供的 provide 和 useExisting 属性来注册自己作为验证器。
然后，我们实现了 Validator 接口中的 validate 方法。该方法接收一个 AbstractControl 对象，并使用正则表达式来检查控件的值是否符合规则。如果符合，则返回 null，否则返回一个包含
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35892
