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 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
这段js代码得节约你多少时间
Dec 20 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
javascript多物体运动实现方法分析
Jan 08 Javascript
JS制作类似选项卡切换的年历
Dec 03 Javascript
JavaScript中this的用法实例分析
Dec 19 Javascript
jQuery简单实现遍历单选框的方法
Mar 06 Javascript
js中call()和apply()改变指针问题的讲解
Jan 17 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
Feb 21 Javascript
微信小程序自定义联系人弹窗
May 26 Javascript
实现AJAX异步调用和局部刷新的基本步骤
Mar 17 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生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
JavaScript的public、private和privileged模式
2009/12/28 Javascript
javascript中删除指定数组中指定的元素的代码
2011/02/12 Javascript
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
2015/04/12 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
js 轮播效果实例分享
2016/12/28 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
Node.js dgram模块实现UDP通信示例代码
2017/09/26 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
Vue中实现权限控制的方法示例
2019/06/07 Javascript
vue全局使用axios的操作
2020/09/08 Javascript
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
Python二叉树的遍历操作示例【前序遍历,中序遍历,后序遍历,层序遍历】
2018/12/24 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
董事长职责范文
2013/11/08 职场文书
优秀的茶餐厅创业计划书
2014/01/03 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
司机岗位职责说明书
2014/07/29 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
总结Java对象被序列化的两种方法
2021/06/30 Java/Android
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
Java 深入探究讲解简单工厂模式
2022/04/07 Java/Android