在线书店支付页面JavaScript卡号验证功能失效求助

你的银行卡号验证功能失效，主要是以下几个核心问题导致的，逐一修复即可解决：

1. 按钮元素未绑定正确的事件监听 #

原JS代码中尝试通过document.getElementById("Pay Now")获取按钮，但你的HTML按钮没有设置对应ID，导致事件绑定失败。同时，按钮是type="submit"，点击后会触发表单默认提交行为，页面刷新会中断验证逻辑。

2. 数字输入框的精度问题 #

银行卡号是16位数字，超过了JavaScript Number类型的安全精度范围（2^53-1），会导致数值被截断或转为科学计数法，正则匹配直接失效。

3. 正则匹配方法不够高效 #

使用match()方法不如test()方法直接，test()返回布尔值更适合做条件判断。

修复后的代码 #

修改HTML部分 #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </nav>
    <h1>Bookstore</h1>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src ="card.js"></script>
  </head>
  <body>
    <h2>Payment Details</h2>
    <form>
      <div>
        <label for="name">Name on Card</label>
        <input type="text" id="name" name="name" required>
      </div>
      <div>
        <label for="card-number">Card Number</label>
        <!-- 修改为text类型，避免精度问题，同时保留数字键盘输入 -->
        <input type="text" id="card-number" name="card-number" required maxlength="16" inputmode="numeric">
      </div>
      <label for="expiry-month">Expiry Date</label>
    <div class="expiry-date">
    <select id="expiry-month" name="expiry-month">
        <option value="">Month</option>
        <option value="01">01</option>
        <option value="02">02</option>
        <option value="03">03</option>
        <option value="04">04</option>
        <option value="05">05</option>
        <option value="06">06</option>
        <option value="07">07</option>
        <option value="08">08</option>
        <option value="09">09</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
    </select>
    <select id="expiry-year" name="expiry-year">
        <option value="">Year</option>
        <option value="2022">2022</option>
        <option value="2023">2023</option>
        <option value="2024">2024</option>
        <option value="2025">2025</option>
        <option value="2026">2026</option>
    </select>
    </div>
      <div>
        <label for="cvv">CVV</label>
        <input type="number" id="cvv" name="cvv" required>
      </div>
      <!-- 给按钮添加ID，规范命名用短横线 -->
      <button type="submit" id="pay-now">Pay Now</button>
    </form>
  </body>
</html>

修改JavaScript部分 #

window.onload = () => {
    // 监听表单提交事件（比监听按钮点击更可靠，覆盖回车提交等场景）
    const paymentForm = document.querySelector('form');
    paymentForm.addEventListener('submit', (event) => {
        // 阻止表单默认提交行为，避免页面刷新
        event.preventDefault();
        
        const cardNumber = document.getElementById("card-number").value.trim();
        const mastercardPattern = /^5[1-5][0-9]{14}$/;
        
        // 使用test()直接获取布尔值，逻辑更清晰
        if (mastercardPattern.test(cardNumber)) {
            window.location.href = "success.html";
        } else {
            alert("Please enter a valid Mastercard number");
        }
    });
};

额外优化建议 #

可以给卡号输入框添加原生正则验证，让浏览器提前给出提示：

<input type="text" id="card-number" name="card-number" required maxlength="16" inputmode="numeric" pattern="5[1-5][0-9]{14}" title="Please enter a valid 16-digit Mastercard number starting with 51-55">

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