javascript - 验证输入标签中的最大金额 : (Aurelia)

Question

我在网页上有一个输入标记，其中变量金额绑定(bind)到输入标记。因此，我们在输入标签中输入的任何值都将与相同的变量(即金额)绑定(bind)。

<input value.bind ="amount" ></input>

我想要的是验证要输入到该输入标签的最大金额。假设我希望最大金额为 99 。所以我不应该允许用户输入超过 99 的金额。假设他尝试输入 100 时，只应输入 10，而不允许输入下一个 0。但我们始终应该任何时候都不要禁用输入标签，它始终应该是可编辑的

Answer 1

Aurelia 是建立在标准之上的。它的绑定(bind)语法可用于 Hook 任何 native Javascript 事件。考虑到这一点，我想到的一件事是 Hook 按键/按键事件以允许或禁止某些字符。

将其与验证 amount 字段的最小/最大值的可观察量 (@bindable) 结合起来，您可能需要研究如下内容:

<template>
    <input type="text" 
    value.bind="amount" 
    keypress.trigger="validate($event)">
</template>

import { bindable } from "aurelia-framework";

export class App {
  @bindable public amount: number;

  public amountChanged(newValue, oldValue) {
    // limit the amount to a min/max value
    if (newValue < 0 || newValue > 99) {
      this.amount = oldValue;
    }
  }

  public validate(args: KeyboardEvent) {
    // simplified validation, in this case for numbers only
    // allow/disallow anything you like here (like decimal seperators)
    if (args.keyCode < 48 || args.keyCode > 57)
    {
      args.preventDefault();
      return;
    }

    return true;
  }
}

请注意，上面的示例是 TypeScript 风格的。
更新:我添加了一个普通的 Javascript gist to play with .

现在验证本身远非理想。在这种情况下，所有非数字键也会被阻止，包括小数点分隔符。您可能想自己添加对此的支持。不过，控制键，如退格键和删除键等仍然有效。

无论如何，这可能是解决您最初请求的一个很好的起点:

• 将值绑定(bind)到属性并添加最小/最大验证
• 禁止某些键/值，在本例中限制为数字
• 如果验证失败，保留原始值