setCustomValidity是HTML表单元素用于设置自定义校验错误提示的方法，传空字符串表示通过，非空字符串触发reportValidity()时显示该提示，需配合校验逻辑动态调用并清空旧状态。
setCustomValidity 是 HTML 表单元素（如 input、select、textarea）原生支持的方法，用于手动设置自定义校验失败时的错误提示文本。它不替代内置校验逻辑，而是配合 checkValidity() 和 reportValidity() 使用，实现更灵活、更友好的错误反馈。
基本用法：清空或设置错误信息
调用 setCustomValidity() 时传入一个字符串：
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
- 传入空字符串
""→ 表示“校验通过”，清除当前自定义错误； - 传入非空字符串（如
"密码长度不能少于8位"）→ 表示“校验失败”，该字符串会作为validationMessage的值，并在调用reportValidity()或表单提交时显示。
必须配合 reportValidity() 或表单提交才能触发提示
仅调用 setCustomValidity("xxx") 不会立刻弹出提示。浏览器只在以下时机展示错误信息：
- 用户点击提交按钮（且表单校验失败）；
- 手动调用元素的
reportValidity()方法； - 调用表单的
reportValidity()（会检查所有子控件）。
例如：
<input type="text" id="username">
const input = document.getElementById("username");
input.setCustomValidity("用户名不能为空");
input.reportValidity(); // 此时才会弹出浏览器默认气泡提示
常见使用场景与建议
-
动态校验逻辑：比如确认密码是否匹配、邮箱是否已注册等无法用
required或pattern直接表达的规则； -
避免重复提示：每次校验前先调用
setCustomValidity("")清除旧状态，再根据新条件设置； -
不要覆盖内置错误：如果同时设置了
required和自定义校验，浏览器会优先显示第一个触发的错误（顺序取决于校验时机），建议统一用自定义逻辑管理； -
样式与体验补充：
setCustomValidity不影响元素样式，可配合:invalid伪类 + JS 添加 class 来高亮错误输入框。
完整小例子：两次输入比对
<input type="password" id="pwd">
<input type="password" id="pwdConfirm">
<button onclick="checkConfirm()">确认
function checkConfirm() {
const pwd = document.getElementById("pwd");
const confirm = document.getElementById("pwdConfirm");
// 先清空可能存在的旧错误
confirm.setCustomValidity("");
if (pwd.value !== confirm.value) {
confirm.setCustomValidity("两次输入的密码不一致");
}
confirm.reportValidity();
}
