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 tablesorter.js 支持中文表格排序改进
Dec 09 Javascript
利用location.hash实现跨域iframe自适应
May 04 Javascript
JQuery自定义事件的应用 JQuery最佳实践
Aug 01 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
jquery easyui validatebox remote的使用详解
Nov 09 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
React/Redux应用使用Async/Await的方法
Nov 16 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
Javascript中的奇葩知识,你知道吗?
Jan 25 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/12/01 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
模拟用户操作Input元素,不会触发相应事件
2007/05/11 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
jQuery封装的屏幕居中提示信息代码
2016/06/08 Javascript
微信小程序 wxapp视图容器 view详解
2016/10/31 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
2016/11/29 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
bootstrap table服务端实现分页效果
2017/08/10 Javascript
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
2018/08/20 Javascript
vue-video-player 断点续播的实现
2021/02/01 Vue.js
python里大整数相乘相关技巧指南
2014/09/12 Python
python和flask中返回JSON数据的方法
2018/03/26 Python
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2016/11/21 HTML / CSS
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
美国非常受欢迎的Spa品牌:Bliss必列斯
2018/04/10 全球购物
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
2014年庆元旦活动方案
2014/02/15 职场文书
顶碗少年教学反思
2014/02/21 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
材料化学专业求职信
2014/07/15 职场文书
浅析MongoDB之安全认证
2021/06/26 MongoDB
Python加密与解密模块hashlib与hmac
2022/06/05 Python