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进行拖拽
Jul 20 Javascript
javascript 学习之旅 (3)
Feb 05 Javascript
浅谈javascript中自定义模版
Jan 29 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
vue element项目引入icon图标的方法
Jun 06 Javascript
在vue中读取本地Json文件的方法
Sep 06 Javascript
4个顶级开源JavaScript图表库
Sep 29 Javascript
ES6 fetch函数与后台交互实现
Nov 14 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
Dec 07 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
php 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
javascript中setInterval的用法
2015/07/19 Javascript
select下拉框插件jquery.editable-select详解
2017/01/22 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
vue使用 better-scroll的参数和方法详解
2018/01/25 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
利用python实现数据分析
2017/01/11 Python
详解Python中的静态方法与类成员方法
2017/02/28 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
Python multiprocessing多进程原理与应用示例
2019/02/28 Python
利用python-docx模块写批量生日邀请函
2019/08/26 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
试用期转正鉴定评语
2014/01/27 职场文书
课外小组活动总结
2014/08/27 职场文书
2016自主招生校长推荐信范文
2015/03/23 职场文书
企业催款函范本
2015/06/24 职场文书
企业安全生产检查制度
2015/08/06 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
pytorch 如何把图像数据集进行划分成train,test和val
2021/05/31 Python
详细介绍python类及类的用法
2021/05/31 Python