Angular2 自定义表单验证器的实现方法


Posted in Javascript onDecember 14, 2018

废话

最近由于项目上需要用到表单验证,前面直接通过 (input) 事件进行数据检查,但是不好和自带的验证器统一,而且也不正统。于是打算研究一下自定义验证器,网上类似的文章很多,但是自己在实现的过程中还是遇到了一些问题。于是还是??碌淖约盒匆黄?恼隆?/p>

正文

这里有官方文档:验证响应式表单,用户的视觉提示,自定义验证器,这篇文章是根据这些文档所来(前面两者就不再赘述比较简单,也说的比较清楚)

Angular支持的内置validate属性:

  • required- 设置表单控件值是非空的
  • email - 设置表单控件的格式是email
  • minlength - 设置表单控件值的最小长度
  • maxlength - 设置表单控件长度的最大值
  • pattern - 设置表单控件的值需匹配 pattern 对应的模式

通过表单控件的.valid判断验证结果,其结果状态:

  • valid - 有效
  • invalid - 无效
  • pristine - 表单值未改变
  • dirty - 表单值已改变
  • touched - 表单控件已被访问过
  • untouched- 表单控件未被访问过

我们经常会遇到如下场景,表单验证(样式比较丑陋请忽略)

Angular2 自定义表单验证器的实现方法

现在我们要实现 url 验证,可以直接通过 正则表达式来匹配,这样的话,直接用 Angular 自带的验证器即可,但是如果要兼容大写呢?我们就不能简单的直接使用正则来匹配了,我们需要在判断之前进行一次转换,把内容全部转换成小写,才能进行正则判断。

这里我们 新建一个 ValidatorBase 类来存放所有的验证,并且新建一个 静态方法 urlValidator(input:FormControl) 来对数据进行 url 验证。具体方法如下:

import { FormControl } from '@angular/forms';
import { Injectable } from '@angular/core'

export class ValidateBase{
 public static urlValidator(input: FormControl){
  let validateString = "(https?://|WWW|www|ftp://|file://)[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[.]+[-A-Za-z0-9+&@#/%=~_|]";

  console.log(input.value);
  //set value 
  let v = input.value;

    if(v!=undefined&&v!="")
    {
     if(v.toLowerCase().match(validateString))
     {
      return null;
     }
     else{
     return {
      isUrl:true
     }
    }
    }
    return null;
 }
}

注意:

这里当匹配成功(即验证成功是需要返回 null 的,不能返回 {isUrl:false},失败是返回的{isUrl:true},不是返回 {isUrl:false}),这样才会让最后表单验证的值为正确的表现。

这里{isUrl:true} 中的 isUrl,即为传入的 FormControl 的.hasError()中的参数值。

调用页面

<form [formGroup]="detailForm" (ngSubmit)="submit()">
 <div>
  <label for="LinkedURL">LinkedURL:</label>
  <input type="LinkedURL" name="LinkedURL" id="LinkedURL" [formControl]="LinkedURL">
  <div class="col-xs-4 col-sm-4" [style.color]="(LinkedURL.touched&&LinkedURL.valid==false)?'#d16e6c':'green'" [hidden]="LinkedURL.untouched">
   <div [hidden]="!LinkedURL.hasError('maxlength')">LinkedURL can not be greater than 250 characters.</div>
   <div [hidden]="!LinkedURL.hasError('isUrl')">LinkedURL is not an url.</div>
   <div [hidden]="!LinkedURL.hasError('required')">Required field.</div>
   <!--Success!-->
   <div [style.color]="'green'" [hidden]="!LinkedURL.valid">Validate success!</div>
  </div>
 </div>
 <button type="submit" [disabled]="!detailForm.valid">Log In</button>
</form>

调用页面对应 ts

import { ValidateBase } from './../../Validators/Validator.base';
import { Component, OnInit } from '@angular/core';

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

@Component({
 selector: 'validate-component',
 templateUrl: 'validate.component.html'
 })

export class SweepstakesDetailComponent implements OnInit {

 private detailForm: FormGroup;
 private LinkedURL: FormControl;

 ngOnInit(): void {
  this.validateForm();
 }

 private validateForm(){

  this.LinkedURL = new FormControl('',[
   Validators.required,
   Validators.maxLength(250),
   ValidateBase.urlValidator
  ]);

  //form
  this.detailForm = this.formBuilder.group({
   LinkedURL:this.LinkedURL,
  });
 }
}

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

Javascript 相关文章推荐
双击滚屏-常用推荐
Nov 29 Javascript
javascript TextArea动态显示剩余字符
Oct 22 Javascript
Jquery之Ajax运用 学习运用篇
Sep 26 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
JavaScript将数据转换成整数的方法
Jan 04 Javascript
使用C++为node.js写扩展模块
Apr 22 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 Javascript
Angular组件化管理实现方法分析
Mar 17 Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 Javascript
在NPM发布自己造的轮子的方法步骤
Mar 09 Javascript
vue watch监控对象的简单方法示例
Jan 07 Vue.js
JavaScript模板引擎应用场景及实现原理详解
Dec 14 #Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 #Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
Dec 14 #Javascript
JS实现的A*寻路算法详解
Dec 14 #Javascript
详解vue项目接入微信JSSDK的坑
Dec 14 #Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
Dec 14 #Javascript
javascript中的event loop事件循环详解
Dec 14 #Javascript
You might like
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
php相当简单的分页类
2008/10/02 PHP
2款PHP无限级分类实例代码
2015/11/11 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
jquery validate 自定义验证方法介绍 日期验证
2014/02/27 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
ES11新增的这9个新特性,你都掌握了吗
2020/10/15 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
使用graphics.py实现2048小游戏
2015/03/10 Python
Python中的多行注释文档编写风格汇总
2016/06/16 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
python Zmail模块简介与使用示例
2020/12/19 Python
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
澳大利亚领先的折扣药房:Chemist Direct(有中文站)
2018/11/24 全球购物
JDK安装目录下有哪些内容
2014/08/25 面试题
送给程序员的20个Java集合面试问题
2014/08/06 面试题
大学活动策划书范文
2014/01/10 职场文书
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
清明扫墓感想
2015/08/11 职场文书
小学体育组工作总结
2015/08/13 职场文书
2019新员工心得体会
2019/06/25 职场文书
Python中npy和mat文件的保存与读取
2022/04/24 Python
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers