根据需求选择 Angular 内置表单验证或自定义验证-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，表单验证是一个非常重要的环节。Angular 提供了内置的表单验证机制，可以有效地简化开发流程。但在实际项目中，有时候我们需要自定义一些验证规则。本文将讨论如何根据需求选择 Angular 内置表单验证或自定义验证。

Angular 内置表单验证

Angular 内置了很多表单验证规则，可以通过指令的方式轻松使用。下面是一些常用的表单验证指令：

required：必填项
minlength：最小长度
maxlength：最大长度
pattern：正则表达式

这些指令可以通过在模板中添加 ngModel 指令来使用。下面是一个示例：

<input type="text" name="username" ngModel required minlength="6" maxlength="20" pattern="[a-zA-Z0-9]+">

在这个示例中，我们定义了一个文本框，它的名称为 username，必填，最小长度为 6，最大长度为 20，只能包含字母和数字。

如果用户输入不符合要求，Angular 会自动给出错误提示。我们可以通过 ngModel 指令的 valid 和 invalid 属性来判断当前表单项是否合法。

<input type="text" name="username" ngModel required minlength="6" maxlength="20" pattern="[a-zA-Z0-9]+">
<div *ngIf="username.invalid && (username.dirty || username.touched)">
  <div *ngIf="username.errors.required">用户名不能为空</div>
  <div *ngIf="username.errors.minlength">用户名长度不能少于 6 个字符</div>
  <div *ngIf="username.errors.maxlength">用户名长度不能超过 20 个字符</div>
  <div *ngIf="username.errors.pattern">用户名只能包含字母和数字</div>
</div>

在这个示例中，我们使用了 Angular 的模板语法，当 username 表单项不合法时，会显示相应的错误提示。

自定义表单验证

除了 Angular 内置的表单验证规则，我们还可以自定义一些表单验证规则。下面是一个自定义验证规则的示例：

-- -------------------- ---- -------
------ - ---------- ----- - ---- ----------------
------ - -------------- ---------- --------------- - ---- -----------------

------------
  --------- ------------------
  ---------- ---------- -------------- ------------ ----------------------- ------ ------
--
------ ----- ---------------------- ---------- --------- -
  ----------------------- ------------- ----------------

  ----------------- ----------------- ------ -------- ---- - ---- -
    ----- ---------- - ------------------------
    ----- ------------ - --------------

    -- ----------- -- ------------ --- ----------- -
      ------ ----------------- ------
    -

    ------ -----
  -
-

在这个示例中，我们定义了一个名为 passwordMatch 的指令，它需要一个参数，即要比较的表单项。在验证函数中，我们首先获取要比较的表单项的值和当前表单项的值，如果它们不相等，就返回一个错误对象。

我们可以在模板中使用这个指令来验证两个密码是否一致：

<input type="password" name="password" ngModel required minlength="6">
<input type="password" name="confirmPassword" ngModel required passwordMatch="[name='password']">
<div *ngIf="confirmPassword.invalid && (confirmPassword.dirty || confirmPassword.touched)">
  <div *ngIf="confirmPassword.errors.required">确认密码不能为空</div>
  <div *ngIf="confirmPassword.errors.passwordMatch">两次输入的密码不一致</div>
</div>

在这个示例中，我们定义了两个密码框，它们分别是 password 和 confirmPassword。我们使用了 passwordMatch 指令来验证两个密码是否一致。

总结

Angular 提供了丰富的表单验证指令，可以满足大部分需求。但在某些情况下，我们需要自定义一些验证规则。根据需求选择合适的表单验证方式，可以提高开发效率，减少出错率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/660aad91d10417a222a59dbc