JS表单数字校验输入数字仍触发错误的实现方案咨询

• 核心逻辑错误：input输入框的value始终是字符串类型，比如输入123获取到的值是字符串"123"，parseInt("123")得到的是数字类型的123，使用!==严格相等判断时，字符串和数字类型不同，判断结果永远为真，所以输入数字也会触发错误提示。
• 选择器不严谨：使用document.querySelector('div')会匹配页面第一个div，后续页面结构变动容易选错元素，建议直接指定目标div的id。
• HTML小问题：原有submit按钮的id属性末尾多了多余的转义引号，会导致属性解析异常。

HTML代码 #

<form id="form_ref" method="post" name="example" action="">
  <label for="username">User</label><input type="text" name="user" id="username" required>
  <div id="a"></div>
  <br>
  <input type="submit" value="Submit Information" id="submit">
</form>

JS代码 #

window.onload = function() {
  let form = document.getElementById('form_ref');
  const errorBox = document.getElementById('a');
  form.onsubmit = function() {
    // 每次提交先清空之前的错误提示
    errorBox.innerHTML = '';
    let userInput = form.user.value.trim();
    // 正则校验输入是否全为数字，^表示开头，$表示结尾，\d+表示一个或多个数字
    const numReg = /^\d+$/;
    if (!numReg.test(userInput)) {
      errorBox.innerHTML = "Error! Please enter digits only!";
      return false;
    }
    return true;
  }
}

• 用正则校验直接判断字符串是否全为数字，不需要做类型转换，避免类型不匹配的判断问题
• 提前获取错误提示容器，每次提交前先清空旧提示，避免错误提示重复残留
• 对输入值做了trim处理，避免首尾空格影响校验结果
• 如果需要支持小数输入，只需把正则改为/^\d+(\.\d+)?$/即可

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