Angular 5 Form Control价格正则验证始终返回无效问题求助

兄弟，我帮你梳理下这个价格验证一直提示无效的排查方向，咱们一步步来揪问题：

• 先盯紧验证用的正则表达式
  十有八九问题出在正则上！比如你是不是写了/^\d+\.\d{2}$/但其实需要允许整数（比如100）也通过？或者正则里漏了转义符，把.写成了没转义的状态——那它就会匹配任意字符，完全不符合你的需求。再比如是不是量词用错了：要严格两位小数的话得是{2}，要是写成{1,2}就会允许一位小数，自然触发无效提示。你可以直接在浏览器控制台测正则，比如输入/^\d+(\.\d{2})?$/.test("100.00")看看返回true还是false，先确认正则本身没问题。

• 检查输入框的类型和取值逻辑
  如果你用的是<input type="number">可得小心了！这种输入框的value拿到手是字符串，但如果不小心转成数字的话，100.00会变成100，这时候正则匹配肯定失败。而且number输入框还会自动去掉末尾的.00，用户输入完100.00，框里可能直接变成100，验证自然不通过。要不试试换成<input type="text">，再配合输入限制（比如只能输入数字和小数点）？

• 核对TS里的验证逻辑有没有写反
  别笑，这种低级错误真的很常见！比如你本来应该是if (正则.test(inputValue))就标记为有效，结果写成了if (!正则.test(inputValue))就提示无效，那不管输入啥都会报错。另外还要看验证触发的时机——是不是用户刚输入一半（比如刚敲了个100.）就触发验证了？这时候当然会提示无效，要不要加个防抖，或者等用户输入完（比如失去焦点时）再验证？

• 排查有没有其他验证规则冲突
  如果你用了框架自带的表单验证（比如Angular的响应式表单、Vue的VeeValidate），说不定和你自定义的规则打架了！比如框架的规则只要求是数字，但你的正则要求必须两位小数，或者框架的规则把某些合法值判定成了无效。去看看表单的所有验证规则，确认都是你预期的那些。

• 手动测试边界值，缩窄问题范围
  自己手动输几个值测测：

  • 合法案例：100.00、0.99、12345.67
  • 非法案例：100.0、100（如果要求必须带小数）、abc、100.000
    看看哪些值会触发无效，这样能快速知道是正则的问题，还是取值逻辑的问题。

• 看看浏览器控制台有没有报错
  打开F12看看控制台，说不定TS代码里有隐性错误，比如变量没定义、正则语法写错了，控制台会直接给你提示，这能帮你快速定位问题根源。

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