Input type=number Safari 仍然允许带步进器的字母

Question

我有一个只允许数字的输入字段：

 <input class="border" type="number" numeric step="0.1" inputmode="numeric" digitOnly maxlength="6" formControlName="resultInput" pattern="[0-9]+"/>

我设置了比需要更多的参数，只是为了检查它是否适用于这些参数。 不幸的是它没有。 当我在Chrome上使用它时，它可以工作，但是当我在Safari上使用它时，它却没有。

Answer 1

不幸的是，许多浏览器只会在表单提交时验证带有type="number"的input 。 在这种情况下，将出现以下提示（以 Safari 为例）：

我已经修改了您的代码段以删除输入的任何非数字输入。 我已经测试过此代码段适用于 Chrome、Firefox 和 Safari。

 <input class="border" type="number" numeric step="0.1" inputmode="numeric" digitOnly maxlength="6" formControlName="resultInput" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/^0[^.]/, '0');" />

如果您愿意放弃步进器，则可以避免让单个非数字字符删除整个输入：

 <input class="border" type="text" inputmode="numeric" digitOnly maxlength="6" formControlName="resultInput" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/^0[^.]/, '0');" />

在这些片段中，我们使用：

oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/^0[^.]/, '0');" 

删除所有会导致input值与典型数字形式不匹配的字符（没有前导零，不超过一位小数）。

请注意：虽然您可以使用 HTML、CSS 和 JavaScript 来限制用户在正常使用您的网站时输入的内容（称为“客户端验证”），但绕过以这种方式设置的限制是微不足道的。

如果您要将此数据发送到服务器进行转换，则不应相信此数据只是数字形式且具有您期望的形式。 您应该将这种类型的验证视为纯粹为了方便起见，而不是为服务器将接收有效数据提供任何保证。

Answer 2

上面的一系列“替换”对我不起作用。 因为我的项目是在 Angular 中，所以我创建了一个自定义表单字段验证器。 这样，在输入无效时会向用户显示错误（这会阻止表单提交）：

public static numberInputValidator(min: number, max: number): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    if (isUndefinedOrEmpty(control?.value) || control.value <= min) {
      return { numberRequired: true };
    } else if(control.value > max) {
      return { numberTooBig: true };
    }
    return null;
  };
}

HTML 输入字段中唯一相关的属性是： type="number" step=".01"

要使用它，请将验证器添加到 FormGroup 中的 FormControl：

myControlName: new FormControl<undefined | number>(undefined, numberInputValidator(0, 100))

即使验证器只接受number输入，如果表单字段包含非数字字符，它也会返回numberRequired 。

然后，如果使用 Angular Material 表单字段，您可以像这样（在<input>字段之后）显示自定义错误消息：

  <mat-error *ngIf="vm.formGroup.get('myControlName')?.errors?.numberRequired">
    <p>Amount must be greater than zero</p>
  </mat-error>
  <mat-error *ngIf="vm.formGroup.get('myControlName')?.errors?.numberTooBig">
    <p>Amount must be less than or equal to 100</p>
  </mat-error>