Question

我有一条指令，该指令是限制文本输入以仅在文本输入中写入十进制数字

这是指令代码

 import { HostListener, Directive, ElementRef } from '@angular/core';

@Directive({
    exportAs: 'decimal-number-directive',
    selector: 'decimal-number-directive, [decimal-number-directive]',
})
export class DecimalNumberDirective {
    private regex: RegExp = new RegExp(/^\d*\.?\d{0,2}$/g);
    private specialKeys: string[] = ['Backspace', 'Tab', 'End', 'Home'];
    constructor(private el: ElementRef) {}
    @HostListener('keydown', ['$event'])
    onKeyDown(event: KeyboardEvent): void {
        if (this.specialKeys.indexOf(event.key) !== -1) {
            return;
        }

        const current: string = this.el.nativeElement.value;
        const next: string = current.concat(event.key);
        if (next && !String(next).match(this.regex)) {
            event.preventDefault();
        }
    }
}

在这里输入我使用的地方

<div class="col-2 pr-0">
                        <label>{{ l('Percent') }}</label>
                        <input
                            class="form-control"
                            type="text"
                            decimal-number-directive
                            name="percent"
                            [(ngModel)]="inquiryItemToAdd.percent"
                            maxlength="64"
                            (ngModelChange)="setTotalPrice()"
                            [readOnly]="!inquiryItemToAdd.servicePriceId || !servicePrice.isPriceCalculated"
                        />
                    </div>

但是我可以写例如155.00或155.56。我需要将其限制为100.00，因为我用它来写百分比。

我尝试使用此正则表达式private regex: RegExp = new RegExp(/^(\d{1,2}(\.\d{1,2})?)|(100(\.0{1,2})?)$/g);，但我仍然可以使用150％。

我该如何解决这个问题？

Answer 1

尝试以下正则表达式。

^：-它将检查是否始终以100开头的字符串
[0] {2}：-它会在.之后检查是否只有2个零。

private regex: RegExp = /^100\.[0]{2}/gm;

您可以在此检查result。

Answer 2

它应该匹配所有从0、0.0、0.00到100、100.0、100.00的正数

正则表达式：

^(\d{1,2}|\d{1,2}\.\d{1,2}|100\.[0]{1,2}|100)$

https://regex101.com/r/S9fbY7/3

更新：

您需要允许。因为50.不是有效的模式而被键入，但是50.8是有效模式，但是每次击键都会验证整个正则表达式，因此，当按下.时，您需要更新代码绕过验证，然后什么也不做，然后如果值以点结尾，可能会模糊不清，则可能会删除值或删除点或在点后添加00

忽略的键：

private specialKeys: string[] = ['Backspace', 'Tab', 'End', 'Home', '.'];

在“模糊”上，您要验证以.结尾的值。请注意，根据您的用例选择任一选项。

if (val.endsWith('.')) {
  // Option 1 strip the . (dot)
  this.el.nativeElement.value = val.substring(0, val.length - 1); 

  // Option 2 add 00 after the . (dot)
  this.el.nativeElement.value = val + '00'; 

  // Option 3 remove the value all together
  this.el.nativeElement.value = ''; 
}

最终密码：

import { HostListener, Directive, ElementRef } from '@angular/core';

@Directive({
  exportAs: 'decimal-number-directive',
  selector: 'decimal-number-directive, [decimal-number-directive]',
})
export class DecimalNumberDirective {
  private regex: RegExp = new RegExp(/^(\d{1,2}|\d{1,2}\.\d{1,2}|100\.[0]{1,2}|100)$/g);
  private specialKeys: string[] = ['Backspace', 'Tab', 'End', 'Home', '.'];
  constructor(private el: ElementRef) { }
  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent): void {
    if (this.specialKeys.indexOf(event.key) !== -1) {
      return;
    }

    const current: string = this.el.nativeElement.value;
    const next: string = current.concat(event.key);
    if (next && !String(next).match(this.regex)) {
      event.preventDefault();
    }
  }

  @HostListener('blur', [])
  onBlur(): void {
    const val = this.el.nativeElement.value;
    if (val.endsWith('.')) {
      this.el.nativeElement.value = val.substring(0, val.length - 1); // Option 1 strip the .
      // this.el.nativeElement.value = val + '00'; // Option 2 add 00 after the .
      // this.el.nativeElement.value = ''; // Option 3 remove the value all together
    }
  }
}

Answer 3

我想这种模式会起作用： ^（\ d {0,2}（。\ d {1,2}）？| 100（.00？）？）$

指令将文本输入中的十进制数限制为最大100.00（Regex）

3 个答案: