时间戳

首页 > 解决方案 > 强制用户在输入时键入正则表达式

regex - 强制用户在输入时键入正则表达式

问题描述

我一直在尝试做一个正则表达式来强制用户只在输入中输入我想要的内容，而不是在输入字段中显示它。我尝试使用许多事件，但事件在输入字段中键入它并且必须进行额外验证或使用代码发现一些错误。从未找到正确的事件。

这是我的 html 文件：

<input [(ngModel)]="someModel" (keydown)="validate($event);">

这是我的组件

validateRegex(event: any) {
    let regexp = new RegExp(/^([0-9][0-9]?)(\.([0-9][0-9]?)?)?$/);

    let keyPress = event.key;

    if(!event.ctrlKey && (event.altKey || event.shiftKey)) {
      event.preventDefault();
      event.stopPropagation();
    }

    if(!event.ctrlKey && keyPress.length < 2) { //Make sure it just press 1 digit, avoid stuff like "backspace"
      if(keyPress == '0' || keyPress == '1' || keyPress == '2' || keyPress == '3' || keyPress == '4' || keyPress == '5'
      || keyPress == '6' || keyPress == '7' || keyPress == '8' || keyPress == '9' || keyPress == '.' ) {
        let test = this.someModel ? this.someModel.toString() + event.key: event.key;
        if (!regexp.test(test)) {
          event.preventDefault();
          event.stopPropagation();
        }
      } else {
        event.preventDefault();
        event.stopPropagation();
      }
    }
  }

现在这验证了用户在点前后只插入带有 2 位数字的小数，也不允许点是他自己的。此代码的问题在于，如果用户键入“99”。然后单击/箭头向后退到第一个 9，他将能够在开头插入一个 9，从而打破正则表达式。event只是插入了钥匙，不知道要插入哪里。

如果我不使用 keydown/keypress，则显示输入已经改变，验证将进行，但 UI 会改变。在keydown中，UI仍然没有改变。我也不想阻止用户在输入中移动

现在是的，我可以使用掩码解决这个问题，但是我得到的库掩码有问题并且也有一些错误。可耻的是我不能使用任何其他。

这可以通过适当的事件解决，或者以某种方式在 keydown 上要求更改的值，或者可以创建我自己的掩码并解决这个问题？

标签： regexangularinput

解决方案

html

<input #input [ngModel]="value" (ngModelChange)="onChange($event);">

ts

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  value = '0';
  @ViewChild('input', { static: false }) input;

  onChange(value: string) {
    let regexp = /^([0-9][0-9]?)(\.([0-9][0-9]?)?)?$/;
    if (!value) {
      this.value = '';
    }
    if (!regexp.test(value)) {
      this.input.nativeElement.value = this.value
    } else {
      this.value = value;
    }

  }
}

https://stackblitz.com/edit/angular-phfkcy?file=src%2Fapp%2Fapp.component.html

推荐阅读