Aurelia框架下输入框金额最大值验证实现方案

针对你用Aurelia的value.bind双向绑定金额输入框，需要限制最大值为99且保持输入框可编辑的需求，这里提供一个实时拦截的实现方案，能在用户输入时直接截断超出部分，确保不会出现超过99的数值：

1. HTML模板修改 #

给输入框绑定input事件，用于实时监听输入内容的变化：

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

这里用type="text"是为了更灵活地处理输入，如果用type="number"可能会有浏览器默认的上下箭头，且处理截断时的行为不如文本输入框可控，当然你也可以根据需求调整类型。

2. ViewModel逻辑实现 #

在对应的ViewModel中添加处理输入的方法，实时校验并截断超出最大值的内容：

export class YourViewModel {
  // 初始化绑定变量，默认值可以是空字符串或0
  amount = '';

  handleAmountInput(event) {
    const input = event.target;
    let inputValue = input.value.trim();

    // 过滤掉所有非数字字符（如果允许用户输入小数点，可修改正则为/[^\d.]/g）
    inputValue = inputValue.replace(/\D/g, '');

    // 校验数值是否超过99，超过则截断到前两位
    if (inputValue && parseInt(inputValue, 10) > 99) {
      inputValue = inputValue.slice(0, 2);
    }

    // 同步更新绑定变量和输入框值（双向绑定会自动同步，但手动赋值确保一致性）
    this.amount = inputValue;
  }
}

方案说明 #

• 实时拦截：通过input事件捕获所有输入行为（键盘输入、粘贴、拖拽等），用户输入时立刻处理，不会出现输入100后再回退的情况，直接阻止第三位字符的输入效果。
• 保持可编辑：全程不禁用输入框，用户始终可以正常编辑内容，只是超出范围的部分会被自动截断。
• 兼容性：处理了非数字输入的情况，避免用户输入无效字符干扰金额数值；如果需要支持小数，只需调整正则和最大值判断逻辑即可。

如果需要将amount保持为数字类型而非字符串，可以修改赋值逻辑：

this.amount = inputValue ? parseInt(inputValue, 10) : '';

这样空输入时变量为空，有效输入时为数字类型，适配不同的业务需求。

内容的提问来源于stack exchange，提问作者Sandeep Pandey