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 相关文章推荐
javascript中的对象和数组的应用技巧
Jan 07 Javascript
基于MooTools的很有创意的滚动条时钟动画
Nov 14 Javascript
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
May 08 Javascript
解析利用javascript如何判断一个数为素数
Dec 08 Javascript
小程序实现发表评论功能
Jul 06 Javascript
微信小程序中时间戳和日期的相互转换问题
Jul 09 Javascript
js实现点击展开隐藏效果(实例代码)
Sep 28 Javascript
JavaScript cookie原理及使用实例
May 08 Javascript
浅谈JavaScript中this的指向更改
Jul 28 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
Aug 25 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
Oct 27 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日历类分享
2014/11/18 PHP
微信获取用户地理位置信息的原理与步骤
2015/11/12 PHP
微信支付开发交易通知实例
2016/07/12 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
用显卡加速,轻松把笔记本打造成取暖器的办法!
2013/04/17 Javascript
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
2016/01/06 Javascript
jQuery 判断元素整理汇总
2017/02/28 Javascript
原生JS实现图片网格式渐显、渐隐效果
2017/06/05 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
js实现录音上传功能
2019/11/22 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
如何利用python查找电脑文件
2018/04/27 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
Python Numpy库安装与基本操作示例
2019/01/08 Python
Python BeautifulSoup [解决方法] TypeError: list indices must be integers or slices, not str
2019/08/07 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
django配置app中的静态文件步骤
2020/03/27 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
对python中list的五种查找方法说明
2020/07/13 Python
python中sys模块是做什么用的
2020/08/16 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
Java和Javasciprt的区别
2012/09/02 面试题
授权委托书格式模板
2014/04/03 职场文书
奥运会口号
2014/06/13 职场文书
法人授权委托书样本
2014/09/19 职场文书
redis实现排行榜功能
2021/05/24 Redis
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python
python 标准库原理与用法详解之os.path篇
2021/10/24 Python
使用Bandicam录制鼠标指针并附带点击声音,还可以添加点击动画效果
2022/04/11 数码科技