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进阶教程(第四课第一部分)
Apr 05 Javascript
jquery 可拖拽的窗体控件实现代码
Mar 21 Javascript
js跑马灯代码(自写)
Apr 17 Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 Javascript
JavaScript基于setTimeout实现计数的方法
May 08 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 Javascript
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
使用原生js+canvas实现模拟心电图的实例
Sep 20 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 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 变量类型的强制转换
2009/10/23 PHP
CURL状态码列表(详细)
2013/06/27 PHP
浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
一组PHP可逆加密解密算法实例代码
2014/01/21 PHP
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
PHP钩子与简单分发方式实例分析
2017/09/04 PHP
PHP+jQuery实现双击修改table表格功能示例
2019/02/21 PHP
javascript StringBuilder类实现
2008/12/22 Javascript
web 页面分页打印的实现
2009/06/22 Javascript
Prototype 学习 工具函数学习($方法)
2009/07/12 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
网页运行时提示对象不支持abigimage属性或方法
2014/08/10 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
学习JavaScript设计模式(多态)
2015/11/25 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
jquery心形点赞关注效果的简单实现
2016/11/14 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
Django自定义manage命令实例代码
2018/02/11 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
Python中base64与xml取值结合问题
2019/12/22 Python
Python如何实现的二分查找算法
2020/05/27 Python
毕业生的自我评价分享
2013/12/18 职场文书
商超业务员岗位职责
2014/03/12 职场文书
洗车工岗位职责
2014/03/15 职场文书
保护地球的标语
2014/06/17 职场文书
2015中学学校工作总结
2015/07/20 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫