表单数字验证正则问题：仅允许≥300000时代码错误排查

需求与问题现象 #

需求：表单仅在输入值小于300000时显示错误提示，输入等于或大于300000时允许提交。
当前问题：输入300000可提交，但输入大于或小于该值时都会触发错误提示。

原代码 #

JavaScript 代码 #

document.addEventListener("DOMContentLoaded", function() {
  document.querySelector('#sbutton').addEventListener('click', function(event) {
    event.preventDefault();
    let inputV = document.querySelector('#budget').value.trim();
    let budgetRegex = /^3[0-9]{5,}/;
    const errorMessage = document.querySelector('#errormsg');
    let form = document.querySelector("form");
    if (inputV == "" || !budgetRegex.test(inputV)) {
      errorMessage.innerHTML = "Value should be at least 300,000.";
      errorMessage.style.display = 'block';
    } else {
      errorMessage.innerHTML = "";
      errorMessage.style.display = 'none';
      form.submit();
    }
  });
});

HTML 代码 #

<form action="https://dragonmm.xyz" method="post">
  <div class="contact-box">
    <div class="left1"></div>
    <div class="right1">
      <h2>Start</h2>
      <label for="name"></label>
      <input id="name" type="text" class="field" placeholder="Name" required>

      <label for="email"></label>
      <input id="email" type="text" class="field" placeholder="Email" required>

      <label for="phone"></label>
      <input id="phone" type="text" class="field" placeholder="Phone" required>

      <label for="budget"></label>
      <input id="budget" type="text" name="budget" class="field budgetInput" placeholder="Budget" required>
      <div id="errormsg"></div>
    </div>
  </div>
  <button type="submit" value="Send" class="btn1" id="sbutton">Send</button>
</form>

错误原因 #

1. 正则表达式逻辑完全错误：
   正则/^3[0-9]{5,}/的含义是：必须以3开头，后面跟至少5位数字。这意味着它只能匹配300000、3xxxxxx这类以3开头的6位及以上数字。
   • 输入大于300000但不以3开头的数值（如400000），正则匹配失败，触发错误；
   • 输入小于300000的数值（如299999），同样不满足正则规则，触发错误；
     完全违背了“大于等于300000即可提交”的需求。
2. 用字符串验证数值逻辑不合理：直接用正则匹配字符串形式的数值，无法准确覆盖所有大于等于300000的数值场景，逻辑局限性极强。

修正方案 #

将验证逻辑改为数值比较，先把输入值转为数字，再判断是否小于300000，同时优化输入框类型为number更贴合需求：

修正后的 JavaScript 代码 #

document.addEventListener("DOMContentLoaded", function() {
  document.querySelector('#sbutton').addEventListener('click', function(event) {
    event.preventDefault();
    let inputV = document.querySelector('#budget').value.trim();
    const errorMessage = document.querySelector('#errormsg');
    let form = document.querySelector("form");
    // 转为数字，空字符串或非数字会转为NaN
    const budgetNum = Number(inputV);
    
    if (inputV === "" || isNaN(budgetNum) || budgetNum < 300000) {
      errorMessage.innerHTML = "金额不能低于300000。";
      errorMessage.style.display = 'block';
    } else {
      errorMessage.innerHTML = "";
      errorMessage.style.display = 'none';
      form.submit();
    }
  });
});

优化后的 HTML 输入框部分 #

将预算输入框的type改为number，限制输入为数字：

<input id="budget" type="number" name="budget" class="field budgetInput" placeholder="Budget" required>

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