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 相关文章推荐
jQuery 第二课 操作包装集元素代码
Mar 14 Javascript
jQuery 自动增长的文本输入框实现代码
Apr 02 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
May 23 Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
Area 区域实现post提交数据的js写法
Apr 22 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
Mar 28 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 Javascript
js图片轮播插件的封装
Jul 21 Javascript
Angular4学习之Angular CLI的安装与使用教程
Jan 04 Javascript
JS实现可视化文件上传
Sep 08 Javascript
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
PHP ajax 分页类代码
2008/11/13 PHP
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
解析PHP 5.5 新特性
2013/07/02 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
PHP发送短信代码分享
2015/08/11 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
用js判断浏览器是否是IE的比较好的办法
2007/05/08 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
js切换光标示例代码
2013/10/10 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
jQuery判断元素是否存在的可靠方法
2014/05/06 Javascript
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
js打造数组转json函数
2015/01/14 Javascript
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
动态创建Angular组件实现popup弹窗功能
2017/09/15 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
js中this对象用法分析
2018/01/05 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
如何在 JavaScript 中更好地利用数组
2018/09/27 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
在Pandas中给多层索引降级的方法
2018/11/16 Python
django+echart数据动态显示的例子
2019/08/12 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
python函数调用,循环,列表复制实例
2020/05/03 Python
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
JAVA程序员面试题
2012/10/03 面试题
质检部经理岗位职责
2014/02/19 职场文书
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis