setcustomvalidity() 实现联动验证的核心是手动接管校验逻辑但复用原生状态和触发机制，适用于密码匹配、手机号与验证码关联等场景，需在 input/blur 事件中清空后设提示，并注意 disabled、novalidate 和异步请求等关键细节。
用 setCustomValidity() 做联动验证，核心是「手动接管校验逻辑，但复用原生状态和触发机制」。它不是替代 required/pattern/type，而是让多个字段之间能互相影响验证结果——比如密码和确认密码是否一致、手机号与验证码是否匹配、协议勾选后邮箱才必填等。
联动场景下怎么设错误提示
当一个字段的验证依赖另一个字段时，不能只靠原生属性自动判断，得在关键时机调用 setCustomValidity() 主动干预：
- 监听目标字段的
input或blur事件（比如确认密码输入时） - 读取关联字段的值（如主密码框的 value）
- 判断是否满足联动条件：不相等就设提示，相等就清空
- 必须先调
confirmInput.setCustomValidity('')再设新文案，否则旧错误残留
密码与确认密码联动示例
HTML 中两个 input 都带 required，但「确认密码是否匹配」需 JS 判断：
const pwd = document.getElementById('password');
const confirm = document.getElementById('confirm-password');
confirm.addEventListener('input', () => {
confirm.setCustomValidity(''); // 先清空
if (confirm.value && confirm.value !== pwd.value) {
confirm.setCustomValidity('两次输入的密码不一致');
}
});
这样，用户输错时 confirm.checkValidity() 返回 false，reportValidity() 会显示你写的中文提示；输对或清空后，状态恢复为有效。
避免联动失效的关键细节
联动容易出问题，往往卡在几个隐性环节：
- 表单提交时如果用了
e.preventDefault()却没手动调form.reportValidity()，自定义提示压根不会出现 - 某个字段被
disabled，即使设了setCustomValidity()，它也不参与整体校验（checkValidity()会跳过） - 父
<form></form>加了novalidate，所有原生校验包括setCustomValidity()的效果都会被禁用 - 异步联动（如用户名是否可用）不能只靠
setCustomValidity()，得等接口返回后再设，且要防重复请求和状态竞争
提交时统一触发联动校验
把联动逻辑收口到 submit 事件里更稳妥，避免失焦或输入中途误判：
form.addEventListener('submit', e => {
// 先清空所有自定义错误，防止旧状态干扰
[pwd, confirm, email].forEach(el => el.setCustomValidity(''));
// 手动检查联动规则
if (confirm.value && confirm.value !== pwd.value) {
confirm.setCustomValidity('两次输入的密码不一致');
}
if (email.value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value)) {
email.setCustomValidity('邮箱格式不正确');
}
// 触发原生提示
if (!form.checkValidity()) {
e.preventDefault();
form.reportValidity(); // 这行才真正弹出气泡
}
});
这样既保留原生校验的语义和可访问性，又让字段之间能按业务规则咬合。
