setcustomvalidity()可在input或blur事件中实时校验确认密码，不一致时显示原生提示，相等或为空时必须调用setcustomvalidity("")清除错误状态。

在 HTML5 表单中，setCustomValidity() 可以配合 input 事件或 blur 事件，对“确认密码”字段做实时校验，一旦与原密码不一致，就触发浏览器原生的验证提示，实现即时拦截。

绑定校验逻辑到确认密码输入框

关键是在确认密码（type="password"）的 input 或 blur 事件中，读取两次输入的值并比对：

• 获取原密码输入框（如 id="password"）的 .value
• 获取确认密码输入框（如 id="confirmPassword"）的 .value
• 若两者不相等且确认框非空，调用 setCustomValidity("提示文字")
• 若相等或确认框为空，必须调用 setCustomValidity("") 清除错误状态（否则会持续阻塞提交）

完整示例代码

以下是最小可运行结构（无需 JS 库）：

Wechat HTML Publisher

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

下载

注册

<script> const pwd = document.getElementById('password'); const confirmPwd = document.getElementById('confirmPassword'); confirmPwd.addEventListener('input', () => { if (confirmPwd.value !== '' && confirmPwd.value !== pwd.value) { confirmPwd.setCustomValidity('两次输入的密码不一致'); } else { confirmPwd.setCustomValidity(''); // ✅ 必须清空！ } }); // 可选：当原密码变化时也触发校验（提升体验） pwd.addEventListener('input', () => { if (confirmPwd.value !== '') { confirmPwd.dispatchEvent(new Event('input')); } }); </script>

注意事项与常见坑

使用 setCustomValidity 实现该功能时，容易忽略以下细节：

• 空值不报错：确认密码为空时不校验（避免用户还没输就提示错误），所以判断条件要包含 confirmPwd.value !== ''
• 必须手动清空错误：只要调过 setCustomValidity("xxx")，后续不调 setCustomValidity("")，表单就永远无法通过验证
• 不依赖 submit 事件：校验应在 input 或 blur 中完成，而不是等到点击提交才检查，才能实现“即时”拦截
• 兼容性良好：所有现代浏览器（Chrome、Firefox、Edge、Safari 10.1+）均支持 setCustomValidity 和原生气泡提示

增强体验的小技巧

让反馈更友好：

• 用 confirmPwd.checkValidity() 配合样式切换（如加红边框）
• 在 input 事件中加防抖（如 200ms），避免高频触发影响性能（尤其移动端）
• 结合 :valid / :invalid CSS 伪类做视觉反馈：input:invalid { border-color: #f44; }

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