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 编程引入命名空间的方法与代码
Aug 13 Javascript
jquery animate 动画效果使用说明
Nov 04 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
js正则表达式中test,exec,match方法的区别说明
Jan 29 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
Jan 10 Javascript
JS二叉树的简单实现方法示例
Apr 05 Javascript
微信小程序的分类页面制作
Jun 27 Javascript
解决vue自定义全局消息框组件问题
Nov 22 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 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 程序员也要学会使用“异常”
2009/06/16 PHP
深入php处理整数函数的详解
2013/06/09 PHP
Laravel框架路由配置总结、设置技巧大全
2014/09/03 PHP
php创建多级目录的方法
2015/03/24 PHP
全面了解PHP中的全局变量
2016/06/17 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
JQuery优缺点分析说明
2010/06/09 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
2016/10/28 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
vue移动端的左右滑动事件详解
2020/06/17 Javascript
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
Python File readlines() 使用方法
2018/03/19 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
谈谈Python中的while循环语句
2019/03/10 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
python一些性能分析的技巧
2020/08/30 Python
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
在购买印度民族服饰:Soch
2020/09/15 全球购物
程序员机试试题汇总
2012/03/07 面试题
四下基层实施方案
2014/03/28 职场文书
对孩子的寄语
2014/04/09 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
学习计划书怎么写
2014/09/15 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
工作失职检讨书范文
2015/05/05 职场文书
投资合作意向书范本
2015/05/08 职场文书
摩登时代观后感
2015/06/03 职场文书
电影雷锋观后感
2015/06/10 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python