17370845950

本文详解如何解决 html 表单中 `required` 和 `pattern` 属性失效、浏览器原生验证被跳过、以及使用 `submit` 事件导致页面空白等问题，核心在于正确绑定表单提交事件、调用 `preventdefault()` 并安全处理表单数据。

在 Web 表单开发中，required 和 pattern 是 HTML5 提供的原生客户端验证机制，但它们仅在表单通过

✅ 正确做法：监听

// ✅ 正确绑定：监听 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 对 支持有限：多数浏览器不会对 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 中处理。

✅ 总结

遵循以上模式，即可兼顾浏览器原生验证、用户体验与脚本可控性，彻底解决验证失效与页面跳转冲突问题。