如何在HTML中实现表单提交状态校验-html教程-PHP中文网

checkvalidity()可主动触发浏览器原生表单校验并返回布尔值，配合reportvalidity()显示提示气泡；setcustomvalidity()支持自定义错误，需清空字符串重置；校验应为提交流程第一步，注意移动端兼容性及dom动态更新后的状态同步。

如何在html中实现表单提交状态校验

表单提交前用 `checkValidity()` 主动触发校验

浏览器原生表单校验（required、type="email"、pattern 等）默认只在用户点击提交按钮或调用 submit() 时触发，但有时你需要在 JS 中提前判断状态，比如禁用按钮、显示提示或拦截异步提交。这时不能依赖 submit 事件是否被阻止，而要主动调用 checkValidity()。

它会同步执行所有约束检查，返回布尔值，并触发 invalid 事件（可用于监听单个字段失败）：

const form = document.querySelector('form');
const submitBtn = form.querySelector('button[type="submit"]');

form.addEventListener('input', () => {
  // 输入过程中实时更新按钮状态
  submitBtn.disabled = !form.checkValidity();
});

// 或在 fetch 前校验
async function handleSubmit(e) {
  e.preventDefault();
  if (!form.checkValidity()) return; // 原生校验不通过，不发请求
  await fetch('/api', { method: 'POST', body: new FormData(form) });
}

注意：checkValidity() 不会自动显示浏览器默认的气泡提示（title 或红框），如需视觉反馈，得手动调用 reportValidity()。

`reportValidity()` 和 `setCustomValidity()` 配合自定义错误

当原生约束不够用（比如“两次输入密码不一致”），就得用 setCustomValidity() 标记字段无效，并配合 reportValidity() 触发统一提示。

关键点：

setCustomValidity('') 表示有效（空字符串 ≠ 无提示，而是清除自定义错误）
setCustomValidity('密码不匹配') 表示无效，且该字符串会作为提示文案
reportValidity() 会触发整个表单的校验流程，包括显示原生提示气泡

示例：

const pwd1 = document.getElementById('password');
const pwd2 = document.getElementById('confirm-password');

pwd2.addEventListener('input', () => {
  if (pwd2.value !== pwd1.value) {
    pwd2.setCustomValidity('两次输入的密码不一致');
  } else {
    pwd2.setCustomValidity(''); // 必须清空，否则后续校验永远失败
  }
});

form.addEventListener('submit', (e) => {
  if (!form.checkValidity()) {
    e.preventDefault();
    form.reportValidity(); // 确保错误提示可见
  }
});

避免 `submit` 事件中漏掉校验逻辑

常见错误是直接在 submit 事件里写业务逻辑，却忘了先调用 checkValidity() 或没处理 preventDefault() 的时机。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

典型陷阱：

写了 e.preventDefault() 却没做任何校验，导致用户完全感知不到字段错误
校验通过后手动调用 form.submit() —— 这会绕过所有 HTML5 校验（包括 reportValidity）
异步提交（如 fetch）成功后没重置表单或清空错误状态，导致下次提交仍卡在旧错误

正确做法：把校验作为提交流程的第一步，失败就 return，成功再走后续逻辑：

form.addEventListener('submit', async (e) => {
  if (!form.checkValidity()) {
    form.reportValidity();
    return; // 阻止后续执行
  }

  e.preventDefault(); // 只在此处 prevent，确保校验已过
  const res = await fetch('/api', {
    method: 'POST',
    body: new FormData(form)
  });

  if (res.ok) form.reset(); // 成功后重置，也清除了所有 <code>setCustomValidity</code> 状态
});