强制用户在输入时键入正则表达式答案

【问题标题】：Force user to type a regex on input强制用户在输入时键入正则表达式
【发布时间】：2019-09-04 14:56:52
【问题描述】：

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

这是我的 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 上要求更改的值，或者可以创建我自己的掩码并解决这个问题？

【问题讨论】：

在输入下方显示一个错误，显示用户输入的内容格式错误，这不是更好吗？然后您可以在错误消息中向他们展示格式有什么问题。当他们纠正它时，错误就会消失。它实现起来要简单得多（使用正则表达式的验证器），并且对最终用户的刺激性较小

标签： regex angular input

【解决方案1】：

html

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

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

【讨论】：