强大的 Angular 表单验证功能详细介绍


Posted in Javascript onMay 23, 2017

Angular 支持非常强大的内置表单验证,maxlength、minlength、required 以及 pattern。使用 Angular 的内置表单校验能够完成绝大多数的业务场景的校验需求,但有时我们还需要实现更为复杂的表单校验功能,这时可以使用 Angular 提供的表单自定义校验(Custom Validator)。下面,我们就来了解一下如何使用 Angular 的自定义表单校验

效果图:

强大的 Angular 表单验证功能详细介绍

1、首先,来创建我们的注册组件(register),并在模版中显示一个简单的表单

<h3 class="text-center">注册</h3>

<form>

 <div class="form-group">
 <label for="username">用户名:</label>
 <input type="text" id="username" class="form-control" >
 </div>

</form>

为了使表单看上去能够漂亮一些,在 index.html 中引入 bootstrap 样式文件:

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

2、接下来确定我们的验证需求:

 我们希望用户名只能包含数字、字母和下划线,且不能以下划线开头

首先为 form 标签添加 formGroup 指令:

<form [formGroup]="registerForm" >

并且为 input 标签添加 formControlName 指令:

<input formControlName="username" type="text" id="username" class="form-control" >

3、在代码中定义验证规则:

从内置表单模块中导入以下类:

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

其中:

      1. formBuilder 用来构建表单数据
      2. formGroup 表示表单类型
      3. Validators 包含了表单内置的验证规则,如: Validators.required

定义表单属性

registerForm: FormGroup;

定义表单验证不通过时每一项显示的错误消息(目前我们只有 username )

formErrors = {
 username: ''
 };

为每一项验证规则定义验证失败时的说明文字(表单控件可能有多条验证规则,由不通过的验证说明构成一条错误消息)

validationMessage = {
 'username': {
  'minlength': '用户名长度最少为3个字符',
  'maxlength': '用户名长度最多为10个字符',
  'required': '请填写用户名'
 }
 };

在构造函数中添加 fb 属性用来构建表单

constructor(private fb: FormBuilder) { }

添加构建表单的方法

buildForm(): void {
 // 通过 formBuilder构建表单
 this.registerForm = this.fb.group({
 /* 为 username 添加3项验证规则:
 * 1.必填, 2.最大长度为10, 3.最小长度为3
 * 其中第一个空字符串参数为表单的默认值
 */
 'username': [ '', [
  Validators.required,
  Validators.maxLength(10),
  Validators.minLength(3)
 ]]
 });

接下来我们添加一个方法用来更新错误信息

onValueChanged(data?: any) {
 // 如果表单不存在则返回
 if (!this.registerForm) return;
 // 获取当前的表单
 const form = this.registerForm;

 // 遍历错误消息对象
 for (const field in this.formErrors) {
  // 清空当前的错误消息
  this.formErrors[field] = '';
  // 获取当前表单的控件
  const control = form.get(field);

  // 当前表单存在此空间控件 && 此控件没有被修改 && 此控件验证不通过
  if (control && control.dirty && !control.valid) {
  // 获取验证不通过的控件名,为了获取更详细的不通过信息
  const messages = this.validationMessage[field];
  // 遍历当前控件的错误对象,获取到验证不通过的属性
  for (const key in control.errors) {
   // 把所有验证不通过项的说明文字拼接成错误消息
   this.formErrors[field] += messages[key] + '\n';
  }
  }
 }
 }

下面只需要在表单构建结束后初始化错误消息,并且在每次表单数据更改时更新错误消息就可以了

在 buildForm 方法中添加如下代码

// 每次表单数据发生变化的时候更新错误信息
 this.registerForm.valueChanges
 .subscribe(data => this.onValueChanged(data));

 // 初始化错误信息
 this.onValueChanged();

此时,我们已经很好的控制了错误信息,下面只需要在表单模版中添加错误信息的显示就可以了

在 input 标签下方添加如下代码:

<div *ngIf="formErrors.username" 
 class="showerr alert alert-danger" >{{ formErrors.username }}</div>

添加如下代码到表单模版的 css 中:

form {
 width: 90%;
 max-width: 45em;
 margin: auto;
 }

 .showerr {
 white-space: pre-wrap;
 }

现在我们就可以尝试运行了,在代码不报错的情况下已经能够看到非常好的效果了

如果代码报错或没有出现想象中的效果则可以参照本文结尾的完整代码进行修改

4、虽然我们已经搭建了整个布局,但是还没有实现我们的最终目的:实现自定义的表单验证
接下来我们创建一个正则验证器,新建文件 validate-register.ts :

import { ValidatorFn, AbstractControl } from '@angular/forms';

 export function validateRex(type: string, validateRex: RegExp): ValidatorFn {
 return (control: AbstractControl): {[key: string]: any} => {
  // 获取当前控件的内容
  const str = control.value;
  // 设置我们自定义的验证类型
  const res = {};
  res[type] = {str}
  // 如果验证通过则返回 null 否则返回一个对象(包含我们自定义的属性)
  return validateRex.test(str) ? null : res;
 }
 }

下面我们在代码中导入此函数:

import { validateRex } from './validate-register';

修改 validationMessage 属性为:

// 为每一项表单验证添加说明文字
 validationMessage = {
 'username': {
  'minlength': '用户名长度最少为3个字符',
  'maxlength': '用户名长度最多为10个字符',
  'required': '请填写用户名',
  'notdown': '用户名不能以下划线开头',
  'only': '用户名只能包含数字、字母、下划线'
 }
 };

修改 buildForm 方法:

// 通过 formBuilder构建表单
 this.registerForm = this.fb.group({
 /* 为 username 添加 5 项验证规则:
 * 1.必填, 2.最大长度为10, 3.最小长度为3, 4.不能以下划线开头, 5.只能包含数字、字母、下划线
 * 其中第一个空字符串参数为表单的默认值
 */
 'username': [ '', [
  Validators.required,
  Validators.maxLength(10),
  Validators.minLength(3),
  validateRex('notdown', /^(?!_)/),
  validateRex('only', /^[1-9a-zA-Z_]+$/)
 ]]
 });

OK ! 大功告成了,赶紧运行代码尝试一下吧,我们可以随时添加各种验证规则,只需要修改 validationMessage 属性和 buildForm 方法即可!

如果添加多个表单控件的话还需要修改 formErrors,例如添加 password 控件则修改 formErrors 为

formErrors = {
 username: '',
 password: ''
};

大家可自行尝试一下!

完整代码:

register.component.html 

<h3 class="text-center">注册</h3>

 <form [formGroup]="registerForm" >

 <div class="form-group">
  <label for="username">用户名:</label>

  <input formControlName="username"
  type="text" id="username" #username
  class="form-control" >
  <div *ngIf="formErrors.username" class="showerr alert alert-danger" >{{ formErrors.username }}</div>
 </div>

 </form>

register.component.css:

form {
 width: 90%;
 max-width: 45em;
 margin: auto;
 }

 .showerr {
 white-space: pre-wrap;
 }

register.component.ts:

import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { validateRex } from './validate-register';

 @Component({
 selector: 'app-register',
 templateUrl: './register.component.html',
 styleUrls: ['./register.component.css']
 })
 export class RegisterComponent implements OnInit {

 // 定义表单
 registerForm: FormGroup;

 // 表单验证不通过时显示的错误消息
 formErrors = {
  username: ''
 };

 // 为每一项表单验证添加说明文字
 validationMessage = {
  'username': {
  'minlength': '用户名长度最少为3个字符',
  'maxlength': '用户名长度最多为10个字符',
  'required': '请填写用户名',
  'notdown': '用户名不能以下划线开头',
  'only': '用户名只能包含数字、字母、下划线'
  }
 };

 // 添加 fb 属性,用来创建表单
 constructor(private fb: FormBuilder) { }

 ngOnInit() {
  // 初始化时构建表单
  this.buildForm();
 }

 // 构建表单方法
 buildForm(): void {
  // 通过 formBuilder构建表单
  this.registerForm = this.fb.group({
  /* 为 username 添加3项验证规则:
  * 1.必填, 2.最大长度为10, 3.最小长度为3, 4.不能以下划线开头, 5.只能包含数字、字母、下划线
  * 其中第一个空字符串参数为表单的默认值
  */
  'username': [ '', [
   Validators.required,
   Validators.maxLength(10),
   Validators.minLength(3),
   validateRex('notdown', /^(?!_)/),
   validateRex('only', /^[1-9a-zA-Z_]+$/)
  ]]
  });

  // 每次表单数据发生变化的时候更新错误信息
  this.registerForm.valueChanges
  .subscribe(data => this.onValueChanged(data));

  // 初始化错误信息
  this.onValueChanged();
 }

 // 每次数据发生改变时触发此方法
 onValueChanged(data?: any) {
  // 如果表单不存在则返回
  if (!this.registerForm) return;
  // 获取当前的表单
  const form = this.registerForm;

  // 遍历错误消息对象
  for (const field in this.formErrors) {
  // 清空当前的错误消息
  this.formErrors[field] = '';
  // 获取当前表单的控件
  const control = form.get(field);

  // 当前表单存在此空间控件 && 此控件没有被修改 && 此控件验证不通过
  if (control && control.dirty && !control.valid) {
   // 获取验证不通过的控件名,为了获取更详细的不通过信息
   const messages = this.validationMessage[field];
   // 遍历当前控件的错误对象,获取到验证不通过的属性
   for (const key in control.errors) {
   // 把所有验证不通过项的说明文字拼接成错误消息
   this.formErrors[field] += messages[key] + '\n';
   }
  }
  }
 }

 }

validate-register.ts:

import { ValidatorFn, AbstractControl } from '@angular/forms';

 export function validateRex(type: string, validateRex: RegExp): ValidatorFn {
 return (control: AbstractControl): {[key: string]: any} => {
  // 获取当前控件的内容
  const str = control.value;
  // 设置我们自定义的严重类型
  const res = {};
  res[type] = {str}
  // 如果验证通过则返回 null 否则返回一个对象(包含我们自定义的属性)
  return validateRex.test(str) ? null : res;
 }
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript prototype 使用介绍
Aug 29 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
Feb 27 Javascript
indexOf 和 lastIndexOf 使用示例介绍
Sep 02 Javascript
javascript插件开发的一些感想和心得
Feb 28 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
Oct 13 Javascript
jquery二级目录选中当前页的css样式
Dec 08 Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
Bootstrap与Angularjs的模态框实例代码
Aug 03 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 Javascript
JS实现音量控制拖动
Jan 15 Javascript
一起深入理解js中的事件对象
Feb 06 Javascript
微信小程序 侧滑删除(左滑删除)
May 23 #Javascript
最常用的jQuery表单验证(简单)
May 23 #jQuery
jquery实现简单实用的轮播器
May 23 #jQuery
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 #Javascript
Bootstrap多级菜单的实现代码
May 23 #Javascript
微信小程序获取用户openId的实现方法
May 23 #Javascript
详解vuex 中的 state 在组件中如何监听
May 23 #Javascript
You might like
PHP经典的给图片加水印程序
2006/12/06 PHP
强烈声明: 不要使用(include/require)_once
2013/06/06 PHP
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
js 链式延迟执行DOME
2012/01/04 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
2017/08/17 Javascript
使用JS中的Replace()方法遇到的问题小结
2017/10/20 Javascript
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
vue2.0 根据状态值进行样式的改变展示方法
2018/03/13 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
2018/08/02 Javascript
vue将后台数据时间戳转换成日期格式
2019/07/31 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
python实现AES加密与解密
2019/03/28 Python
python 修改本地网络配置的方法
2019/08/14 Python
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
波兰珠宝品牌:YES
2019/08/09 全球购物
美国宠物护理专家:Revival Animal Health
2020/01/05 全球购物
What is the purpose of Void class? Void类的作用是什么?
2016/10/31 面试题
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
超市优秀员工事迹材料
2014/05/01 职场文书
党员群众路线承诺书
2014/05/20 职场文书
个人工作表现评价材料
2014/09/21 职场文书
文明礼仪倡议书
2015/04/28 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
关于python中模块和重载的问题
2021/11/02 Python
Vue3实现简易音乐播放器组件
2022/08/14 Vue.js