如何使用正则表达式为文本框添加薪资格式验证？

现有表单如下：

<form>
  <input type="text" value="" placeholder="Enter no. of employee" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" required/>
  <input type="text" value="" placeholder="Enter Salary" required/>
  <input type="submit"/>
</form>

需要为「Enter Salary」文本框添加符合以下要求的验证与格式化：

• 薪资采用逗号分隔格式，例如1,00,000
• 仅允许输入数字，规则与「Enter no. of employee」字段一致

修改后的代码实现 #

<form>
  <input type="text" value="" placeholder="Enter no. of employee" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" required/>
  <input type="text" value="" placeholder="Enter Salary" oninput="
    // 过滤非数字字符，仅保留数字
    let cleanNum = this.value.replace(/[^0-9]/g, '');
    // 实时格式化为逗号分隔格式
    this.value = cleanNum.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  " required/>
  <input type="submit"/>
</form>

逻辑说明 #

1. 输入限制：通过replace(/[^0-9]/g, '')移除所有非数字字符，确保用户只能输入数字，和员工数字段的输入限制逻辑对齐（员工数字段允许小数点，薪资场景无需小数点，因此只保留纯数字）
2. 自动格式化：利用正则/\B(?=(\d{3})+(?!\d))/g，从数字右侧开始每三位插入一个逗号，自动生成符合要求的薪资格式
3. 实时生效：绑定oninput事件，用户每输入一个字符就触发一次处理，保证输入过程中格式始终正确

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