Angular响应式表单：Input事件中货币字段验证（禁止点开头）

你可以在现有替换规则后添加一个处理开头小数点的正则替换，直接从根源上禁止小数点作为首字符。以下是修正后的代码：

validateInput(event) {
  event.target.value = event.target.value
    .replace(/[^0-9.]/g, '') // 只保留数字和小数点
    .replace(/^\./, '') // 移除开头的小数点
    .replace(/(\..*?)\..*/g, '$1') // 只保留第一个小数点
    .replace(/(\.\d{2}).+/g, '$1'); // 限制小数点后最多两位
}

关键修正说明 #

• 新增的replace(/^\./, '')会精准匹配字符串开头的小数点并直接移除，确保输入的第一个字符只能是数字。
• 保持原有规则的执行顺序：先过滤非法字符，再处理开头的小数点，接着确保只有一个小数点，最后限制小数位数，逻辑清晰且覆盖所有要求的场景。

如果想简化正则整合（可选），也可以用以下写法：

validateInput(event) {
  let value = event.target.value.replace(/[^0-9.]/g, '');
  // 合并处理开头小数点、单小数点限制、小数位限制
  value = value.replace(/^\./, '').replace(/(\.\d{0,2})|\./g, '$1');
  event.target.value = value;
}

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