Angular实现表单验证功能


Posted in Javascript onNovember 13, 2017

Angular表单验证分为两种验证:1.内置验证(required,minlength等);2.自定义验证(正则表达式)。

接下来我们用一个注册账号的demo来看一下这两种验证是如何实现的。

项目界面

Angular实现表单验证功能

一、内置验证

其中账户名有required验证和最短长度验证,其他两个只有required验证

1.项目目录

----------app.component.ts

----------app.component.html

----------app.component.css

----------app.module.ts

2.项目代码

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule,ReactiveFormsModule }  from '@angular/forms';//表单验证必须导入这两个模块

import { AppComponent } from './app.component';

@NgModule({
 declarations: [
  AppComponent
 ],
 imports: [
  BrowserModule,
  FormsModule,  //注册模块
  ReactiveFormsModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component,OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'app';
 Form:FormGroup;
 data={
   name:"",
   email:"",
   tel:""
 }
 ngOnInit(): void {
   this.Form = new FormGroup({
      'name': new FormControl(this.data.name, [
       Validators.required,
       Validators.minLength(4)
      ]),
      'email': new FormControl(this.data.email, Validators.required),
      'tel': new FormControl(this.data.tel, Validators.required)
     });
  }

  get name() { return this.Form.get('name'); }
  get email() { return this.Form.get('email'); }
  get tel() { return this.Form.get('tel'); }
}

简单来说,在使用验证表单的时候,大致分为四步:

(1)导入相关模块FormGroup, FormControl, Validators;

(2)声明表单验证变量From:FromGroup;

(3)定义验证规则;

(4)通过它所属的控件组(FormGroup)的get方法来访问表单控件

app.component.html

<div class="wrapper">
  <div class="row">
    <p class="title-wrapper">注册账号</p>
  </div>
  <div class="row">
    <div class="contain-wrapper" [formGroup]="Form">
      <label for="name">账户名:</label>
      <input type="text" id="name" formControlName="name"><br/>
      <div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
        <div *ngIf="name.errors.required">
          请输入长度账户名!
        </div>
        <div *ngIf="name.errors.minlength">
          账户名长度不小于4!
        </div>
      </div>
      <label for="email">邮箱:</label>
      <input type="text" id="email" formControlName="email"><br/>
      <div *ngIf="email.invalid && (email.dirty || email.touched)" class="alert alert-danger">
        <div *ngIf="email.errors.required">
          请输入邮箱!
        </div>
      </div>
      <label for="tel">电话:</label>
      <input type="text" id="tel" formControlName="tel">
      <div *ngIf="tel.invalid && (tel.dirty || tel.touched)" class="alert alert-danger">
        <div *ngIf="tel.errors.required">
          请输入电话!
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <button class="btn btn-primary confirm">确认</button>
  </div>
</div>

app.component.css

*{
  font-size: 18px;
}
.wrapper{
  margin: 0 auto;
  margin-top:10%;
  width:30%;
  height: 20%;
  border:1px solid black;
  border-radius: 10px;
}

.title-wrapper{
  margin: 0 auto;
  padding-top: 20px; 
  padding-bottom: 20px;
  width:370px;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
}
label{
  display: inline-block;
  width:72px;
}
.contain-wrapper{
  width: 300px;
  margin:0 auto;
}
.confirm{
  margin-top:20px;
  width:100%;

}

3.项目效果

Angular实现表单验证功能

二、自定义验证

自定义表单验证,需要创建自定义验证器,我们接下来更改邮箱的验证,将其改为有格式的验证,而不是单纯的存在验证,首先我们来看一下项目目录的更改

1.项目目录

----------app.component.ts

----------app.component.html

----------app.component.css

----------app.module.ts

----------emailAuthentication.ts

2.项目代码

app.module.ts

注册自定义验证器EmailValidatorDirective

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule,ReactiveFormsModule }  from '@angular/forms';
import { EmailValidatorDirective } from './emailAuthentication';

import { AppComponent } from './app.component';

@NgModule({
 declarations: [
  AppComponent,
  EmailValidatorDirective
 ],
 imports: [
  BrowserModule,
  FormsModule,
  ReactiveFormsModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

emailAuthentication.ts

import { Directive, Input, OnChanges, SimpleChanges } from '@angular/core';
import { AbstractControl, NG_VALIDATORS, Validator, ValidatorFn, Validators } from '@angular/forms';

/** A hero's name can't match the given regular expression */
export function emailValidator(nameRe: RegExp): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } => {
    const forbidden = !nameRe.test(control.value);
    return forbidden ? { 'forbiddenName': { value: control.value } } : null;
  };
}

@Directive({
  selector: '[appForbiddenName]',
  providers: [{ provide: NG_VALIDATORS, useExisting: EmailValidatorDirective, multi: true }]
})
export class EmailValidatorDirective implements Validator {
  @Input() forbiddenName: string;

  validate(control: AbstractControl): { [key: string]: any } {
    return this.forbiddenName ? emailValidator(new RegExp(this.forbiddenName, 'i'))(control)
      : null;
  }
}

app.component.ts

import { Component,OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { emailValidator } from './emailAuthentication'; //导入emailValidator自定义验证器

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'app';
 //email的正则表达式
 emailExp = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/ ;
 Form:FormGroup;
 data={
   name:"",
   email:"",
   tel:""
 }
 ngOnInit(): void {
   this.Form = new FormGroup({
      'name': new FormControl(this.data.name, [
       Validators.required,
       Validators.minLength(4)
      ]),
      'email': new FormControl(this.data.email, [
        Validators.required,
        emailValidator(this.emailExp) //自定义验证器
        ]),
      'tel': new FormControl(this.data.tel, Validators.required)
     });
  }

  get name() { return this.Form.get('name'); }
  get email() { return this.Form.get('email'); }
  get tel() { return this.Form.get('tel'); }
}

app.component.html

<div class="wrapper">
  <div class="row">
    <p class="title-wrapper">注册账号</p>
  </div>
  <div class="row">
    <div class="contain-wrapper" [formGroup]="Form">
      <label for="name">账户名:</label>
      <input type="text" id="name" formControlName="name"><br/>
      <div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
        <div *ngIf="name.errors.required">
          请输入账户名!
        </div>
        <div *ngIf="name.errors.minlength">
          账户名长度不小于4!
        </div>
      </div>
      <label for="email">邮箱:</label>
      <input type="text" id="email" formControlName="email" required><br/>
      <div *ngIf="email.invalid && (email.dirty || email.touched)" class="alert alert-danger">
        <div *ngIf="email.errors.forbiddenName">
         请输入正确格式的邮箱!
        </div>
      </div>
      <label for="tel">电话:</label>
      <input type="text" id="tel" formControlName="tel">
      <div *ngIf="tel.invalid && (tel.dirty || tel.touched)" class="alert alert-danger">
        <div *ngIf="tel.errors.required">
          请输入电话!
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <button class="btn btn-primary confirm" [disabled]="Form.invalid" >确认</button>
  </div>
</div>

在最后确认的时候,我们设置一下按钮的disabled属性,在表单验证不通过的时候,确认按钮是点击不了的,显示不可点击状态。[disabled]="Form.invalid"。

3.项目效果

Angular实现表单验证功能

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

Javascript 相关文章推荐
Javascript 模式实例 观察者模式
Oct 24 Javascript
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 Javascript
Javascript调用函数方法的几种方式介绍
Mar 20 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
Oct 13 Javascript
vue模板语法-插值详解
Mar 06 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
Jul 12 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
Jan 31 Javascript
通过vue刷新左侧菜单栏操作
Aug 06 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
Nov 13 #Javascript
Vue.js用法详解
Nov 13 #Javascript
利用HBuilder打包前端开发webapp为apk的方法
Nov 13 #Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 #Javascript
vue 挂载路由到头部导航的方法
Nov 13 #Javascript
详解Vuex管理登录状态
Nov 13 #Javascript
Vue2 配置 Axios api 接口调用文件的方法
Nov 13 #Javascript
You might like
mysql5详细安装教程
2007/01/15 PHP
php实现可用于mysql,mssql,pg数据库操作类
2014/12/13 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
google地图的路线实现代码
2009/08/20 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
2010/03/17 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
JavaScript window.document的属性、方法和事件小结
2012/10/24 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
2012/12/13 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
2013/03/29 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
2015/06/24 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
2016/09/19 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
RequireJS简易绘图程序开发
2016/10/28 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
深入解析ES6中的promise
2018/11/08 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
[52:20]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
Python 正则表达式的高级用法
2016/12/04 Python
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
编写函数,将一个3*3矩阵转置
2013/10/09 面试题
父亲生日宴会答谢词
2014/01/10 职场文书
我的五年职业生涯规划
2014/01/23 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
自主招生自荐信指南
2014/02/04 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
给老师的感谢信
2015/01/20 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
总结Java对象被序列化的两种方法
2021/06/30 Java/Android
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫