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多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 Javascript
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
Javascript 计算字符串在localStorage中所占字节数
Oct 21 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
Jan 22 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
Jquery实时监听input value的实例
Jan 26 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
May 12 Javascript
vue中如何去掉空格的方法实现
Nov 09 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 Javascript
JavaScript工具库MyTools详解
Jan 01 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 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
十大“创意”战术!
2020/03/04 星际争霸
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
jquery显示隐藏input对象
2014/07/21 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
easyui combobox开启搜索自动完成功能的实例代码
2016/11/08 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
2017/01/05 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
浅谈如何通过node.js对数据进行MD5加密
2018/05/16 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
2018/07/23 jQuery
微信小程序自定义键盘 内部虚拟支付
2018/12/20 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
python算法题 链表反转详解
2019/07/02 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
寒假实习自荐信
2014/01/26 职场文书
环境科学专业优秀毕业生自荐书
2014/02/03 职场文书
年检委托书
2014/08/30 职场文书
创先争优演讲稿
2014/09/15 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
公司放假通知怎么写
2015/04/15 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
小学家长意见怎么写
2015/06/03 职场文书
如何用python插入独创性声明
2021/03/31 Python
mysql 如何获取两个集合的交集/差集/并集
2021/06/08 MySQL
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python