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

网络编程 2025/11/30 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.com

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的？"color: #ff0000">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']),
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

angular,表单验证器验证,angular表单验证

标签：

angular,表单验证器验证,angular表单验证

蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

评论“angular 表单验证器验证的同时限制输入的实现”

暂无angular 表单验证器验证的同时限制输入的实现的评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2025年11月30日

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

angular,表单验证器验证,angular表单验证

关于js陀螺仪的理解分析

angular 实现同步验证器跨字段验证的方法

评论“angular 表单验证器验证的同时限制输入的实现”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接