本文详解如何解决 html 表单中 `required` 和 `pattern` 属性失效、浏览器原生验证被绕过、以及使用 `submit` 事件后页面空白等问题，核心在于正确绑定表单提交事件、调用 `preventdefault()` 并安全获取表单数据。
在 Web 表单开发中，常遇到一个典型矛盾：想利用 HTML5 原生验证（如 required、pattern）提升用户体验和数据质量，却又因错误的事件绑定方式导致验证失效或页面意外跳转/刷新。你当前的问题正是这一矛盾的集中体现——使用 "click" 监听提交按钮时，浏览器跳过验证直接执行 JS；而改用 "submit" 后，若未阻止默认行为，表单会以传统方式提交（导致空白页），且 google.script.run 等异步操作可能未触发。
✅ 正确做法：监听 <form> 的 submit 事件 + e.preventDefault()
应将事件监听器绑定到 <form> 元素本身，并在回调函数中显式调用 e.preventDefault()，从而阻止默认提交行为，保留浏览器验证逻辑，同时获得完全控制权：
<form id="inputForm"> <!-- 表单字段保持不变 --> <input type="submit" id="clockIn" class="button" value="Clock In"> </form>
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()：否则 <form> 会按传统方式提交（GET/POST 到 action URL），造成页面跳转或空白——这正是你遇到“空白页”的根本原因。
- 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"），但用户可能输入空格或大小写偏差。建议增强容错：
<input type="text" id="jnum" name="jnum" pattern="[A-Za-z]-\d{4}" title="Format: Letter-Dash-FourDigits (e.g., A-1234)" required>
? 补充：服务端验证不可省略
前端验证仅为用户体验优化，绝不能替代后端校验。google.script.run.addEntry(info) 中仍需在 Apps Script 端验证 info 数组长度、格式、非空等，防止恶意绕过。
通过以上调整，你将获得：✅ 原生验证生效 ✅ 页面不刷新 ✅ 数据安全提交 ✅ 用户体验清晰可控。
立即学习“前端免费学习笔记（深入）”；
