本文详解如何解决 html 表单中 `required` 和 `pattern` 属性失效、浏览器原生验证被跳过、以及使用 `submit` 事件导致页面空白等问题，核心在于正确绑定表单提交事件、调用 `preventdefault()` 并安全处理表单数据。
在 Web 表单开发中，required 和 pattern 是 HTML5 提供的原生客户端验证机制，但它们仅在表单通过 <form> 的 submit 事件（而非按钮 click）触发时才会生效。你当前代码将事件监听器绑定在提交按钮（id="clockIn"）的 "click" 上，这会导致：
✅ 表单立即执行 JavaScript 逻辑（如清空字段、调用 google.script.run）；
❌ 浏览器跳过所有 required/pattern/:checked 验证，用户可提交非法数据；
❌ 若改用 "submit" 事件但未调用 e.preventDefault()，则表单会按默认行为提交（刷新/跳转），造成“空白页”——这正是你遇到的问题。
✅ 正确做法：监听 <form> 的 submit 事件 + 显式阻止默认行为
将事件监听器从按钮移至整个表单，并在处理函数中调用 event.preventDefault()：
<form id="inputForm"> <!-- 所有表单字段保持不变 --> <input type="submit" id="clockIn" class="button" value="Clock In"> </form>
// ✅ 正确绑定：监听 form 的 submit 事件
document.getElementById("inputForm").addEventListener("submit", function(e) {
e.preventDefault(); // ? 关键！阻止默认提交，保留页面并触发验证
// ✅ 此时浏览器已执行原生验证：
// - required 字段是否为空？
// - pattern 是否匹配？（如 job number 必须符合 [A-Z]-[0-9]{4}）
// - radio group 是否至少有一个 checked？（注意：radio 本身不支持 required 属性的 DOM 级验证，需手动检查）
// 获取表单值
const fname = document.getElementById("fname").value.trim();
const lname = document.getElementById("lname").value.trim();
const jnum = document.getElementById("jnum").value.trim();
// ✅ 安全获取 radio 值（避免 querySelector(':checked') 返回 null 时 .value 报错）
const operationRadio = document.querySelector('input[name="operation"]:checked');
const process = operationRadio ? operationRadio.value : null;
// ✅ 手动验证 radio 是否必选（HTML required 对 radio 不完全可靠）
if (!process) {
alert("Please select an operation (Cut, Drill, Fit Up, or Weld).");
return; // 中断提交
}
// ✅ 可选：增强 pattern 验证（兼容旧浏览器或自定义逻辑）
const jnumPattern = /^[A-Z]-\d{4}$/;
if (!jnumPattern.test(jnum)) {
alert("Job number must match format: A-1234 (single uppercase letter, hyphen, four digits).");
return;
}
// ✅ 构造数据并提交
const comment = document.getElementById("comment").value.trim();
const timeIn = new Date().toLocaleString();
const info = [fname, lname, jnum, process, timeIn, comment];
// 调用 Google Apps Script 后端（仅在验证通过后）
google.script.run.addEntry(info);
// ✅ 重置表单（推荐使用 reset() 方法，更健壮）
document.getElementById("inputForm").reset();
alert("Submitted successfully!");
});⚠️ 关键注意事项
- 不要用 click 绑定提交逻辑：它绕过所有浏览器验证，违背语义化表单设计原则。
- 必须调用 e.preventDefault()：否则 submit 事件会触发页面刷新（GET 请求）或跳转（无 action 时可能显示空白页）。
- required 对 <input type="radio"> 支持有限：多数浏览器不会对 radio group 自动高亮错误，务必手动检查 querySelector(':checked') 是否为 null。
-
pattern 验证依赖正则语法正确性：你的 [A-Z]-[0-9]{4} 在 HTML 中有效，但注意：
- 它不匹配小写字母（如 a-1234）；
- 若需更宽松，可改为 [A-Za-z]-\d{4}；
- 建议在 JS 中二次校验以提升兼容性与用户体验。
- 表单重置推荐 form.reset()：比逐个设 .value = "" 更可靠（自动重置 radio/checkbox 状态）。
- Google Apps Script 注意：google.script.run 是异步的，若需提交后禁用按钮防重复点击，应在 withSuccessHandler 中处理。
✅ 总结
| 问题现象 | 根本原因 | 解决方案 |
|---|---|---|
| required/pattern 不生效 | 事件绑定在 click 而非 submit | 改为监听 <form> 的 submit 事件 |
| 提交后页面空白 | 未调用 e.preventDefault() 导致默认提交 | 在事件处理器首行添加 e.preventDefault() |
| Radio 无选中时报错或提交空值 | querySelector(':checked').value 对 null 报错 | 先判断存在性：const el = ...; if (el) use(el.value) |
| 表单重置失败 | 手动清空未处理 radio 状态 | 使用 document.getElementById("inputForm").reset() |
遵循以上模式，即可兼顾浏览器原生验证、用户体验与脚本可控性，彻底解决验证失效与页面跳转冲突问题。
