本文详解如何解决 html 表单中 `required` 和 `pattern` 属性失效、浏览器原生验证被绕过、以及使用 `submit` 事件后页面空白等问题，核心在于正确绑定表单提交事件、调用 `preventdefault()` 并安全获取表单数据。
在 Web 表单开发中，常遇到一个典型矛盾：想利用 HTML5 原生验证（如 required、pattern）提升用户体验和数据质量，却又因错误的事件绑定方式导致验证失效或页面意外跳转/刷新。你当前的问题正是这一矛盾的集中体现——使用 "click" 监听提交按钮时，浏览器跳过验证直接执行 JS；而改用 "submit" 后，若未阻止默认行为，表单会以传统方式提交（导致空白页），且 google.script.run 等异步操作可能未触发。
✅ 正确做法：监听
document.getElementById("inputForm").addEventListener("submit", function(e) {
e.preventDefault(); // ? 关键！阻止页面刷新/跳转
// ✅ 验证通过后才继续执行
if (!this.checkValidity()) {
// 浏览器会自动显示原生验证提示（如红色边框、tooltip）
return;
}
// 安全获取输入值
const firstName = document.getElementById("fname").value.trim();
const lastName = document.getElementById("lname").value.trim();
const jobNumber = document.getElementById("jnum").value.trim();
// ? 安全获取选中的 radio 值（避免 querySelector(':checked') 返回 null 时出错）
const operationRadio = document.querySelector('input[name="operation"]:checked');
const process = operationRadio ? operationRadio.value : "";
const comment = document.getElementById("comment").value.trim();
const timeIn = new Date().toLocaleString();
// 组装数据
const info = [firstName, lastName, jobNumber, process, timeIn, comment];
// ✅ 调用 Google Apps Script 后端（仅在验证通过后）
google.script.run.addEntry(info);
// ✅ 重置表单（推荐使用 reset() 方法，更健壮）
this.reset();
// ✅ 可选：清除 radio 按钮状态（reset 已包含此行为，但显式处理更清晰）
document.querySelectorAll('input[name="operation"]').forEach(r => r.checked = false);
alert("Submitted successfully!");
});⚠️ 关键注意事项
- 不要监听按钮的 click 事件：它绕过所有 HTML5 表单验证（required/pattern/type="email" 等），导致无效数据直接提交。
- 必须调用 e.preventDefault()：否则
- checkValidity() 是你的第一道防线：它触发浏览器原生验证并返回布尔值，配合 :invalid 伪类可实现样式反馈。
- querySelector(':checked') 可能返回 null：务必判空，否则 .value 会报错 Cannot read property 'value' of null。使用 this.reset() 比逐个清空 input 更可靠，且自动重置 radio/checkbox。
- pattern="[A-Z]-[0-9]{4}" 注意兼容性：该正则要求严格匹配（如 "A-1234"），但用户可能输入空格或大小写偏差。建议增强容错：
? 补充：服务端验证不可省略
前端验证仅为用户体验优化，绝不能替代后端校验。google.script.run.addEntry(info) 中仍需在 Apps Script 端验证 info 数组长度、格式、非空等，防止恶意绕过。
动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版
下载
动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包
通过以上调整，你将获得：✅ 原生验证生效 ✅ 页面不刷新 ✅ 数据安全提交 ✅ 用户体验清晰可控。
立即学习“前端免费学习笔记（深入）”；
