如何用index.html实现简单的表单验证

HTML5原生验证够用但仅适用于基础场景；它自动拦截空必填、格式错误的email/url并显示默认气泡，但文案样式不可控、不支持自定义规则，复杂需求须结合JavaScript。

HTML5原生验证够用吗？

够用，但只适用于基础场景。浏览器会自动拦截空必填字段、格式错误的email或url输入，并显示默认提示气泡。但提示文案无法定制，样式不可控，且不支持自定义规则（比如“密码需含数字和字母”）。如果项目只需防止用户手滑漏填，直接加required、type="email"就行；否则必须配合JavaScript。

用checkValidity()和reportValidity()做手动触发

这两个方法是原生验证的核心接口，常被忽略却非常实用：

• checkValidity()只检查有效性，返回true或false，不显示提示
• reportValidity()不仅检查，还会触发浏览器默认的错误提示（带气泡）
• 适合在表单提交前统一校验，比如绑定到button onclick而不是form onsubmit，避免页面跳转干扰调试

示例：

<form id="myForm">  <input type="email" required>  <button type="button" onclick="validateForm()">提交</button></form><script>function validateForm() {  const form = document.getElementById('myForm');  if (form.checkValidity()) {    console.log('通过');  } else {    form.reportValidity(); // 弹出原生提示  }}</script>

监听input和blur实现实时反馈

原生验证默认只在提交时触发，用户体验差。想做到“输错立刻标红”，得手动监听事件：

• input事件适合实时校验长度、格式（如手机号前三位），但频繁触发要注意性能
• blur（失焦）更适合语义化校验，比如邮箱格式、两次密码是否一致
• 别直接改input.style.borderColor，优先用classList.add('error')配合CSS控制样式，避免内联样式污染
• 注意：setCustomValidity('')必须调用才能清除之前设置的自定义错误，否则checkValidity()始终返回false

自定义验证用setCustomValidity()要小心

这个API容易误用。关键点：

立即学习“前端免费学习笔记（深入）”；

• 空字符串''表示“验证通过”，非空字符串（如'密码太短'）才表示失败
• 一旦调用过setCustomValidity('xxx')，后续必须显式调用setCustomValidity('')重置，否则该字段永远验证失败
• 它和原生验证共存，比如一个required字段，先设了setCustomValidity('')，再输空，required仍会生效
• 错误文案会覆盖浏览器默认提示，但气泡位置、样式依然不可控

复杂逻辑（比如异步校验用户名是否已存在）必须自己实现UI提示，不能依赖setCustomValidity()。

表单验证真正难的不是写逻辑，而是状态同步——什么时候清错误、什么时候拦提交、怎么让提示不打架。原生能力只解决一半问题，剩下得靠你盯住每个input的生命周期。