angular 表单验证器验证的同时限制输入的实现


Posted in Javascript onApril 11, 2019

angular里面对于表单验证,设置了很多指令。

也就是说不用自己写一些逻辑,直接绑定指令就行。

ng-app     启动你angular的模块

 ng-controller 控制器,启动你angualr里面的逻辑代码作用在页面上

ng-options  循环你select里面的option标签,很好用的

 ng-submit,表单提交执行的

novalidate  表单form配合后期检测的

ng-model  实现双数据绑定

ng-show 根据一定的逻辑实现显示

ng-cloak 绑定在节点上,防止节点渲染,angular指令闪烁

ng-class class类名根据你的逻辑,出现

ng-required 检测你的input为不为空

ng-pattern 正则表达式,绑定在input上面限制输入规范

ng-maxlength 最多输入限制

ng-minlength 最少输入限制

ng-disabled="myForm.$invalid" 脏检测

大概就需要这些指令了,大家不要喷我。谢谢

仔细回想以前使用响应式表单的验证器的时候,只是验证输入的值是否非法,而没有做对应的限制输入,比如当输入一串金额的时候只能输入数字,有这种需求的时候,我们该怎么做限制输入?用input来监听?用onModelChange来监听?我们可以直接写在验证器里面。

表单的验证分为模板驱动验证和响应式表单的验证,响应式表单添加自定义验证器非常方便,所以我们来直接以响应式表单的验证为研究基础。

首先构造基本的表单:

<form nz-form [formGroup]="validateForm">
 <nz-form-item>
  <nz-form-label [nzSpan]="6" nzFor="code">GA Code</nz-form-label>
  <nz-form-control [nzSpan]="14">
   <input nz-input name="code" formControlName="code" id="code">
  </nz-form-control>
 </nz-form-item >
</form>
validateForm: FormGroup;
constructor(
  private fb: FormBuilder,
) {
}
ngOnInit() {
  this.validateForm = this.fb.group({
    code: [33, [Validators.required, Validators.maxLength(6)]],
  });
}

我们创建的这个响应式表单是要验证一个谷歌验证的「code」字段,并给与了两个验证器,一个必填验证,一个验证长度最长是6位。运行起来后,我们输入的如果超过6位范围输入框就会变成红色,这是OK的。

现在我们需要在验证的同时限制输入,比如只让用户输入数字,其他的一切都不可输入。

创建验证器,在验证的同时,限制输入

我们使用正则表达式来判断。首先,判断一个字符串是否是全数字:/^\d*$/.test(value)。然后将有「杂质」的字符串修正为纯数字:value.replace(/[^0-9]/ig, '')。

思路是,创建验证器,当有输入值的时候,验证器运行,判断是否是全数字,如果不是就进行替换。我们可以得到如下的验证器:

onlyNumber(): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    // value有值且如果值包含非数字,就需要替换
    if (control.value && !/^\d*$/.test(control.value)) {
      control.setValue(control.value.replace(/[^0-9]/ig, ''), {
        emitEvent: false,
        emitViewToModelChange: false,
      });
    }
    return null;
  };
}

将验证器使用在我们的响应式表单上:

this.validateForm = this.fb.group({
  code: [33, [Validators.required, this.onlyNumber(), Validators.maxLength(6)]],
});

运行程序,随便输入来测试测试,竟然是ok的??(那我前几次的时候是做了什么骚造作让浏览器堆栈溢出的???)

emmmmmmmm。。。。。。我上次确实是让浏览器堆栈溢出了,这次正常反而很奇怪了。不影响,我们来看看setValue(value, options)的options几个配置参数吧:

  • onlySelf:如果为 true,则每次变更只影响该控件本身,不影响其父控件。默认为 false。
  • emitEvent:如果为 true 或未提供(默认),则当控件值变化时, statusChanges 和 valueChanges 这两个 Observable 都会以最近的状态和值发出事件。 如果为 false,则不会发出事件。
  • emitModelToViewChange:如果为 true 或未提供(默认),则每次变化都会触发一个 onChange 事件以更新视图。
  • emitViewToModelChange:如果为 true 或未提供(默认),则每次变化都会触发一个 ngModelChange 事件以更新模型。

首先,对于onlySelf来讲,如果我们有跨字段的验证的话,设置这个为false就不影响表单层次的验证器。emitEvent是对statusChange和valeChanges两个Observable的影响,一般我们用Observable的方式监听字段的值变化时有用到。emitModelToViewChange配置是触发onChange来更新视图的,如果如果设置为false的话,无论我们怎么更新字段的值,是不会显示在页面上的。emitViewToModelChange触发ngModelCahnge时间更新模型,但好像这个参数设置为false并没什么用。

得得得,好的就行。

假如我们需要在验证的条件也和其他表单字段有关系怎么办?那我们需要formGroup级的验证。

formGroup的验证器

我们需要这样创建验证器,返回一个由formGroup构成的验证器:

onlyNumberValidator(formKeys: string[]): ValidatorFn {
  return (formGroup: FormGroup): ValidationErrors | null => {
    for (const key of formKeys) {
      const value = formGroup.controls[key].value;
      if (value && !/^\d*$/.test(value)) {
        formGroup.controls[key].setValue(value.replace(/[^0-9]/ig, ''), {
          onlySelf: true,
        });
      }
    }
    return null;
  }};

使用:

this.validateForm = this.fb.group({
  typeList: [[]],
  feeRate: [null, [Validators.required, Validators.pattern(/^[0-9]+(.[0-9]{1,2})?$/), Validators.max(0.999)]],
  code: [33, [Validators.required, Validators.maxLength(6)]],
}, {
  validator: this.onlyNumberValidator(['code']),
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 多种搜索引擎集成的页面实现代码
Jan 02 Javascript
jQuery 第二课 操作包装集元素代码
Mar 14 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 Javascript
javascript中动态加载js文件多种解决办法总结
Nov 15 Javascript
轻松实现javascript数据双向绑定
Nov 11 Javascript
jQuery代码实现对话框右上角菜单带关闭×
May 03 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
又一款js时钟!transform实现时钟效果
Aug 15 Javascript
基于JavaScript实现的折半查找算法示例
Apr 14 Javascript
webpack手动配置React开发环境的步骤
Jul 02 Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 #Javascript
vue实现新闻展示页的步骤详解
Apr 11 #Javascript
记一次用vue做的活动页的方法步骤
Apr 11 #Javascript
vue数据初始化initState的实例详解
Apr 11 #Javascript
Vue起步(无cli)的啊教程详解
Apr 11 #Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 #Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
Apr 10 #Javascript
You might like
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
PHP 获取目录下的图片并随机显示的代码
2009/12/28 PHP
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
PHP daddslashes 使用方法介绍
2012/10/26 PHP
php比较相似字符串的方法
2015/06/05 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
js事件冒泡实例分享(已测试)
2013/04/23 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
2017/02/22 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
js实现表格单列按字母排序
2020/08/12 Javascript
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
django 解决manage.py migrate无效的问题
2018/05/27 Python
详解基于django实现的webssh简单例子
2018/07/17 Python
python numpy元素的区间查找方法
2018/11/14 Python
pycharm运行和调试不显示结果的解决方法
2018/11/30 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
分享一个页面平滑滚动小技巧(推荐)
2019/10/23 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
西尔斯百货官网:Sears
2016/09/06 全球购物
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
个人简历自我评价
2014/01/06 职场文书
出国签证在职证明
2014/01/16 职场文书
保护环境建议书100字
2014/05/13 职场文书
党的群众路线对照检查材料(个人)
2014/09/24 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
MySQL 8.0 之不可见列的基本操作
2021/05/20 MySQL
德生BCL3000抢先使用感受和评价
2022/04/07 无线电