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 相关文章推荐
js取滚动条的尺寸的函数代码
Nov 30 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
Jquery使用val方法读写value值
May 18 Javascript
JS数组array元素的添加和删除方法代码实例
Jun 01 Javascript
常用Javascript函数与原型功能收藏(必看篇)
Oct 09 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
Jan 09 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
javascript将url解析为json格式的两种方法
Aug 18 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
Feb 08 Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
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 函数使用方法与函数定义方法
2010/05/09 PHP
PHP setTime 设置当前时间的代码
2012/08/27 PHP
php mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
PHP合并静态文件详解
2014/11/14 PHP
php中 $$str 中 &quot;$$&quot; 的详解
2015/07/06 PHP
php blowfish加密解密算法
2016/07/02 PHP
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
js微信分享实现代码
2020/10/11 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
使用python turtle画高达
2020/01/19 Python
Tensorflow的梯度异步更新示例
2020/01/23 Python
keras中的History对象用法
2020/06/19 Python
Abe’s of Maine:自1979以来销售相机和电子产品
2016/11/21 全球购物
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
Viking比利时:购买办公用品
2019/10/30 全球购物
物业保安员岗位职责制度
2014/01/30 职场文书
《云房子》教学反思
2014/04/20 职场文书
酒店管理求职信
2014/06/09 职场文书
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android