Question

我在网页上有一个输入标记，其中variable金额与输入标记有关。因此，我们输入到输入标记的任何值都将以相同的variable数量绑定。

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

我想要的是对输入到该输入标签的最大金额进行验证。假设我希望最大金额为99。所以我不应该允许用户输入超过99的金额。如果他试图输入100，只有10输入，下一个0不应该被允许进入那里。但是我们总是不应该在任何时候禁用输入标记，它alwasys应该是可编辑的

Answer 1

Aurelia建立在标准之上。它的绑定语法可用于挂钩任何本机Javascript事件。考虑到这一点，我想到的一件事是挂钩到keypress / keydown事件以允许或禁止某些字符。

将它与验证<template> <input type="text" value.bind="amount" keypress.trigger="validate($event)"> </template>字段的最小值/最大值的observable（@bindable）相结合，您可能希望查看类似的内容：

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;
  }
}

private byte[] getBytes(Properties properties){
    ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
    try {
        props.store(byteArrayOutputStream, "");
    } catch (IOException e) {
        log.error("An error occurred while storing properties to a byte array: " + e.getStackTrace());
    }

    return byteArrayOutputStream.toByteArray();
}

请注意，上面的示例是TypeScript风格 更新：我添加了一个vanilla Javascript delete。

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

无论如何，这可能是解决原始请求的良好起点：

将值绑定到属性并在其上添加最小/最大验证
禁止某些键/值，在这种情况下限制为数字
如果验证失败，则保留原始值

验证输入标签中的最大金额：（Aurelia）

1 个答案: