我们会在本文中探索 Angular 2 内建的自定义验证。

@H_502_3@# 介绍

Angular 2 原生就支持一些有用的验证器：

required: 验证字段必须存在
minlength: 验证字段值的最小长度有效
maxlength: 验证字段值的最大长度有效
pattern: 验证输入的值是否匹配给定的模板，比如 email

我们会基于下面的接口创建一个表单来获取用户信息。

required,must be 5-8 characters email: string; // required,must be valid email format password: string; // required,value must be equal to confirm password. confirmPassword: string; // required,value must be equal to password. }

@H_502_3@需求

仅在字段数据不正确或提交表单的时候，为每个字段显示错误消息。

UI 展示：

@H_502_3@# App 配置

这是我们的文件结构：

为了使用新的表单模块，我们需要用 npm install @ angular/forms 指令调用 npm 包，并在应用程序模块中导入最新的表单模块。

下面是我们应用程序的 app.module.ts 模块:

@H_502_3@# App 组件

让我们继续创建 App 组件。

调用API保存customer console.log(model,isValid); } }

@H_502_3@# HTML 视图

这是我们的 HTML 视图的样子。

Add user

现在来一个个添加控件。

@H_502_3@用户名

需求：必填，长度在 5-8 个字符之间

...

Username required minlength="5" maxlength="8" #username="ngModel"> required (minimum 5 characters).

...

required、minlength、maxlength 都是内置的验证器，所以很容易使用。

我们只会在用户名无效、获得焦点和提交表单的情况下显示错误消息。最后一条的 pre 标签在开发过程中对调试很有用。它会显示字段的所有验证错误。

@H_502_3@电子邮件地址

需求：必填，必须是有效的电子邮件地址格式

...

Email required and format should be john@doe.com.

...

我们把 email 设置为必填，然后使用内建的模板验证器，通过正则表达式来检查 email 的值：^[a-zA-Z0–9_.+-]+@[a-zA-Z0–9-]+.[a-zA-Z0–9-.]+$.

@H_502_3@密码和确认密码

需求：

密码：必填，值必须与确认密码的值相同。
确认密码：必填，值必须与密码的值相同。

...

Password required #password="ngModel"> required

Retype password required validateEqual="password" #confirmPassword="ngModel">

...

validateEqual 是我们自定义的验证器。它会将当前输入的值与输入的密码值进行对比验证。

@H_502_3@# 自定义确认密码验证器

我们将制定一个 validate equal 指令。

EqualValidator),multi: true } ] }) export class EqualValidator implements Validator { constructor( @Attribute('validateEqual') public validateEqual: string) {} validate(c: AbstractControl): { [key: string]: any } { // self value (e.g. retype password) let v = c.value; // control value (e.g. password) let e = c.root.get(this.validateEqual); // value not equal if (e && v !== e.value) return { validateEqual: false } return null; } }

代码很长，让我们把它拆开一部分一部分地看。

@H_502_3@申明指令

首先，我们使用 @Directive 注解定义指令。然后我们指定 selector。selector 是必须的。我们会扩展内建验证器集合 NG_VALIDATORS 来将我们的等值验证器用于 providers.

我们的指令类必须实现 Validator 接口。Validator 接口需要 avalidate 函数。在构建函数中，我们通过 @Attribute('validateEqual') 注解注入属性值，并将其赋值给 validateEqual 变量。在我们的示例中， validateEqual 的值是 "password" 。

@H_502_3@实现验证

首先我们从输入控件读入值，赋给 v。然后我们在表单中找到 password 控件的值赋值给 e。之后检查值是否相等，如果不等就返回错。

@H_502_3@# 在应用模块中导入自定义验证器

要使用自定义验证器，需要先将其导入到应用程序模块中。

好了！假如你在 password 字段中输入 "123"，在 retype password 字段中输入"xyz"，就会显示一个密码不匹配的错误。

# 看起来挺好，但是……

现在一切都挺好，直到你在 retype passowrd 中输入文本之后又修改了 password 字段的值。

比如，你在 password 字段中输入 "123"，在 retype password 字段中也输入 "123"，然后将 password 字段的值改为 "1234" 。验证仍然通过。为什么？

因为我们只把等值验证器应用到 retype password 字段。只有当 retype password 的值发生变化时才会触发验证。

@H_502_3@解决办法

有几种方法可以解决这个问题。我们这里只讨论其中一种，你自己可以去找到其它办法。我们会再次使用 validateEqual 验证器并添加一个 reverse 属性。

... required validateEqual="confirmPassword" reverse="true"> required validateEqual="password"> ...

reverse 是 false 或者没有设置的情况下，我们会像前一节提到的那样执行等值验证器。
reverse 是 true 的时候，我们仍然会执行等值验证器，但它不会为当前控件添加错误消息，而是为指定会把的目标控件添加错误消息。

在我们的例子中，我们设置 password 验证的 reverse 为 true。只要 password 与 retype password 的值不等，我们会为确证密码字段添加一个错误消息，而不是重置 password 字段。

完整的自定义验证器代码如下：

当然，还有其他方法也能解决密码和确认密码验证问题。有些人建议在组（ stack overflow ）中添加密码和确认密码的机制，然后验证它。

方法没有绝对的好与坏，适合自己的才是最好的。

以上所述是小编给大家介绍的在 Angular2 中实现自定义校验指令（确认密码）的方法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

在 Angular2 中实现自定义校验指令（确认密码）的方法

Add user

猜你在找的JavaScript相关文章