Question

我想验证一个数字，同时用户开始在输入字段中输入。我尝试使用以下正则表达式无法正常工作。

/^\d+(?:\.\d{1,3})?$/

对我预期的以下情况感到满意。 120 --->是的， 120.2 --->是的， 120.123->正确 120g->错误

不能满足我的期望。

120.->返回false->但我期望是真的。

任何人都可以帮助我。

谢谢

Answer 1

如果用户只是键入了句号但还没有键入，您需要在可能的.之后的数字是可选的。使用\d{0,3}而不是\d{1,3}：

console.log(/^\d+(?:\.\d{0,3})?$/.test('120.'));

如果要验证没有尾随时间，请在用户指示他们已经完成键入后输入，例如在表单提交中，在这种情况下，您可以使用原始正则表达式。

Answer 2

在大多数情况下，使用RegExp来验证数字值是一个坏主意。使用<input type="number">。请参见my answer here进行验证，以及该答案的摘录：

(() => {
  const inputElement = document.querySelector("#ex2");
  const report = document.querySelector("#report");
  const bttn = document.querySelector("button");
  const getAction = cando => cando ? "removeAttribute" : "setAttribute";
  const checkVal = val => val
      && val >= +inputElement.getAttribute("min")  
      && val <= +inputElement.getAttribute("max");
  const messages = {
    cando: "Ok to submit",
    noValue: "Waiting for input (1.400,00 - 12.000,00)",
    invalid: "Value should be from 1.400,00 up to 12.000,00"
  };
  
  inputElement.focus();
  checkValue();

  function checkValue() {
    const val = inputElement.value;
    const cando = checkVal(val);
    report.innerHTML = !val 
      ? messages.noValue
      : cando
        ? messages.cando
        : messages.invalid;
    bttn[getAction(cando)]("disabled", true);
    return setTimeout(checkValue, 200);
  }
})();

<input id="ex2" 
  type="number"
  min="1400" 
  max="12000"
  step="0.01"/>

<button disabled>submit</button> <span id="report"></span>

正则表达式在键入时验证数字

2 个答案: