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

HTML5原生验证够用吗？

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

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

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

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

示例：

Wechat HTML Publisher

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

下载

提交

<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的生命周期。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！