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


Posted in Javascript onJanuary 23, 2017

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

# 介绍

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

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

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

// user.interface.ts
export interface User {
 username: string; // 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.
}

需求

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

UI 展示:

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

# App 配置

这是我们的文件结构:

|- app/
 |- app.component.html
 |- app.component.ts
 |- app.module.ts
 |- equal-validator.directive.ts
 |- main.ts
 |- user.interface.ts
|- index.html
|- styles.css
|- tsconfig.json

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

$ npm install @angular/forms --save

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

// app.module.ts
import { NgModule }  from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
 imports:  [ BrowserModule, FormsModule ], // import forms module here
 declarations: [ AppComponent ],
 bootstrap: [ AppComponent ],
})
export class AppModule { }

# App 组件

让我们继续创建 App 组件。

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { User } from './user.interface';
@Component({
 moduleId: module.id,
 selector: 'app-root',
 templateUrl: 'app.component.html',
 styleUrls: ['app.component.css']
})
export class AppComponent implements OnInit {
 public user: User;
 ngOnInit() {
  // initialize model here
  this.user = {
   username: '',
   email: '',
   password: '',
   confirmPassword: ''
  }
 }
 save(model: User, isValid: boolean) {
  // 调用API保存customer
  console.log(model, isValid);
 }
}

# HTML 视图

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

<!-- app.component.html -->
<div>
 <h1>Add user</h1>
 <form #f="ngForm" novalidate (ngSubmit)="save(f.value, f.valid)">
  <!-- 我们将把验证的字段放在这里 -->
  <button type="submit" [disabled]="!myForm.valid">Submit</button>
 </form>
</div>

现在来一个个添加控件。

用户名

需求: 必填,长度在 5-8 个字符之间

<!-- app.component.html -->
...
<div>
 <label>Username</label>
 <input type="text" name="username" [ngModel]="user.username" 
  required minlength="5" maxlength="8" #username="ngModel">
 <small [hidden]="username.valid || (username.pristine && !f.submitted)">
  Username is required (minimum 5 characters).
 </small>
</div>
<pre *ngIf="username.errors">{{ username.errors | json }}</pre>
...

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

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

电子邮件地址

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

<!-- app.component.html -->
...
<div>
 <label>Email</label>
 <input type="email" name="email" [ngModel]="user.email" 
  required pattern="^[a-zA-Z0?9_.+-]+@[a-zA-Z0?9-]+.[a-zA-Z0?9-.]+$" #email="ngModel" >
 <small [hidden]="email.valid || (email.pristine && !f.submitted)">
  Email is required and format should be <i>john@doe.com</i>.
 </small>
</div>
...

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

密码和确认密码

需求:

  1. 密码: 必填,值必须与确认密码的值相同。
  2. 确认密码: 必填,值必须与密码的值相同。
<!-- app.component.html -->
...
<div>
 <label>Password</label>
 <input type="password" name="password" [ngModel]="user.password" 
  required #password="ngModel">
 <small [hidden]="password.valid || (password.pristine && !f.submitted)">
  Password is required
 </small>
</div>
<div>
 <label>Retype password</label>
 <input type="password" name="confirmPassword" [ngModel]="user.confirmPassword" 
  required validateEqual="password" #confirmPassword="ngModel">
 <small [hidden]="confirmPassword.valid || (confirmPassword.pristine && !f.submitted)">
  Password mismatch
 </small>
</div>
...

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

# 自定义确认密码验证器

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

// equal-validator.directive.ts
import { Directive, forwardRef, Attribute } from '@angular/core';
import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';
@Directive({
 selector: '[validateEqual][formControlName],[validateEqual][formControl],[validateEqual][ngModel]',
 providers: [
  { provide: NG_VALIDATORS, useExisting: forwardRef(() => 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;
 }
}

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

申明指令

// equal-validator.directive.ts
@Directive({
 selector: '[validateEqual][formControlName],[validateEqual] 
 [formControl],[validateEqual][ngModel]',
 providers: [
  { provide: NG_VALIDATORS, useExisting: forwardRef(() => EqualValidator), multi: true }
 ]
})

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

// equal-validator.directive.ts
export class EqualValidator implements Validator {
 constructor( @Attribute('validateEqual') public validateEqual: string) {}
 validate(c: AbstractControl): { [key: string]: any } {}
}

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

实现验证

// equal-validator.directive.ts
validate(c: AbstractControl): { [key: string]: any } {
 // 自己的值 (如 retype password)
 let v = c.value;
 // 控件的值 (如 password)
 let e = c.root.get(this.validateEqual);
 // 值不等旱
 if (e && v !== e.value) return {
  validateEqual: false
 }
 return null;
}

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

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

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

// app.module.ts
...
import { EqualValidator } from './equal-validator.directive'; // 导入验证器
import { AppComponent } from './app.component';
@NgModule({
 imports:  [ BrowserModule, FormsModule ],
 declarations: [ AppComponent, EqualValidator ], // 导入到应用模块
 bootstrap: [ AppComponent ],
})
...

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

# 看起来挺好,但是……

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

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

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

解决办法

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

<!-- app.component.html -->
...
<input type="password" class="form-control" name="password" 
 [ngModel]="user.password" 
 required validateEqual="confirmPassword" reverse="true">
<input type="password" class="form-control" name="confirmPassword" 
 [ngModel]="user.confirmPassword" 
 required validateEqual="password">
...
  • reverse 是 false 或者没有设置的情况下,我们会像前一节提到的那样执行等值验证器。
  • reverse 是 true 的时候,我们仍然会执行等值验证器,但它不会为当前控件添加错误消息,而是 为指定 会把的目标控件添加错误消息 。

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

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

// equal-validator.directive.ts
import { Directive, forwardRef, Attribute } from '@angular/core';
import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';
@Directive({
 selector: '[validateEqual][formControlName],[validateEqual][formControl],[validateEqual][ngModel]',
 providers: [
  { provide: NG_VALIDATORS, useExisting: forwardRef(() => EqualValidator), multi: true }
 ]
})
export class EqualValidator implements Validator {
 constructor(@Attribute('validateEqual') public validateEqual: string,
 @Attribute('reverse') public reverse: string) {
 }
 private get isReverse() {
  if (!this.reverse) return false;
  return this.reverse === 'true' ? true: false;
 }
 validate(c: AbstractControl): { [key: string]: any } {
  // self value
  let v = c.value;
  // control vlaue
  let e = c.root.get(this.validateEqual);
  // value not equal
  if (e && v !== e.value && !this.isReverse) {
   return {
    validateEqual: false
   }
  }
  // value equal and reverse
  if (e && v === e.value && this.isReverse) {
   delete e.errors['validateEqual'];
   if (!Object.keys(e.errors).length) e.setErrors(null);
  }
  // value not equal and reverse
  if (e && v !== e.value && this.isReverse) {
   e.setErrors({ validateEqual: false });
  }
  return null;
 }
}

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

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

以上所述是小编给大家介绍的在 Angular2 中实现自定义校验指令(确认密码)的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
javascript 原型继承介绍
Aug 30 Javascript
全面解析Bootstrap中transition、affix的使用方法
May 30 Javascript
简单实现JS计算器功能
Dec 21 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
js表单序列化判断空值的实例
Sep 22 Javascript
vue 实现的树形菜的实例代码
Mar 19 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 Javascript
jQuery中DOM操作原则实例分析
Aug 01 jQuery
vue项目中自定义video视频控制条的实现代码
Apr 26 Javascript
JavaScript数组reduce()方法的语法与实例解析
Jul 07 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 #Javascript
利用JS实现简单的日期选择插件
Jan 23 #Javascript
获取IE浏览器Cookie信息的方法
Jan 23 #Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 #Javascript
原生和jQuery的ajax用法详解
Jan 23 #Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 #Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
Jan 23 #Javascript
You might like
PHP备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
PHP过滤★等特殊符号的正则
2014/01/27 PHP
ThinkPHP登录功能的实现方法
2014/08/20 PHP
php可生成缩略图的文件上传类实例
2014/12/17 PHP
php 获取文件行数的方法总结
2016/10/11 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
ext for eclipse插件安装方法
2008/04/27 Javascript
JavaScript Prototype对象
2009/01/07 Javascript
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
3个可以改善用户体验的AngularJS指令介绍
2015/06/18 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
express启用https使用小记
2019/05/21 Javascript
layui导出所有数据的例子
2019/09/10 Javascript
python中安装模块包版本冲突问题的解决
2017/05/02 Python
Python中dict和set的用法讲解
2019/03/28 Python
pycharm创建scrapy项目教程及遇到的坑解析
2019/08/15 Python
对Python获取屏幕截图的4种方法详解
2019/08/27 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
pycharm 2020.2.4 pip install Flask 报错 Error:Non-zero exit code的问题
2020/12/04 Python
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
管理站站长岗位职责
2013/11/27 职场文书
抽样调查项目计划书
2014/04/24 职场文书
国际贸易实务实训报告
2014/11/05 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers
使用Django框架创建项目
2022/06/10 Python