本文针对 javascript 表单验证不触发的问题，重点解析因 dom 元素选择错误（如误用按钮文本作为 id）导致事件监听失败的根本原因，并提供可立即生效的修复方法、完整示例及最佳实践建议。
本文针对 javascript 表单验证不触发的问题，重点解析因 dom 元素选择错误（如误用按钮文本作为 id）导致事件监听失败的根本原因，并提供可立即生效的修复方法、完整示例及最佳实践建议。
在前端开发中，一个看似简单的表单验证逻辑（例如检测信用卡号格式并跳转）却“完全不执行”，往往并非逻辑错误，而是源于对 DOM 选择机制的误解。你提供的代码中，核心问题在于这一行：
document.getElementById("Pay Now").addEventListener("click", ...);getElementById() 方法严格依据 HTML 元素的 id 属性进行查找——而你的
<button type="submit">Pay Now</button>
因此，document.getElementById("Pay Now") 返回 null，后续调用 .addEventListener() 会直接抛出 TypeError: Cannot read property 'addEventListener' of null，整个脚本中断，验证逻辑自然无法运行。
✅ 正确修复方式：为按钮显式添加 id 属性
立即学习“Java免费学习笔记（深入）”；
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
修改 HTML 中的按钮为：
<button type="submit" id="pay-now">Pay Now</button>
同时，同步更新 JavaScript 中的选择器（推荐使用语义化、短横线分隔的 ID，避免空格和大写）：
window.onload = () => {
// ✅ 正确：通过 id="pay-now" 获取元素
document.getElementById("pay-now").addEventListener("click", (e) => {
e.preventDefault(); // ⚠️ 关键：阻止表单默认提交，避免页面刷新丢失验证结果
const cardInput = document.getElementById("card-number");
const card = cardInput.value.trim(); // 去除首尾空格，提升健壮性
const pattern = /^5[1-5][0-9]{14}$/;
if (pattern.test(card)) { // ✅ 推荐用 .test() 替代 .match()，更简洁且返回布尔值
window.location.href = "success.html";
} else {
alert("Please enter a valid Mastercard number (starts with 51–55, 16 digits)");
cardInput.focus(); // 自动聚焦到错误字段，提升用户体验
}
});
};? 其他关键注意事项：
- <script> 加载时机</script>：确保 card.js 在
- 表单提交行为：
- 输入类型兼容性： 在部分浏览器中可能自动过滤非数字字符，但也可能允许粘贴含空格/字母的内容。建议配合 .trim() 和正则校验双重保障。
- ID 命名规范：HTML id 值不能包含空格（如 "Pay Now" 是非法 ID），应使用 kebab-case（如 pay-now）或 camelCase（如 payNow），确保跨浏览器兼容性。
- 扩展建议：生产环境中，建议改用
通过以上修正，你的信用卡号验证逻辑即可稳定运行。记住：JavaScript 脚本失效的第一排查点，永远是“目标元素是否真实存在且 ID 匹配”——这是比语法逻辑更基础、也更常被忽视的关键环节。
