原生表单 invalid 事件触发时浏览器会显示不可定制的默认提示气泡，需在事件中调用 preventDefault() 阻止并手动实现自定义校验反馈，且该事件不冒泡，须为每个控件单独绑定。
原生表单校验触发 invalid 事件时，浏览器默认会显示自己的提示气泡（如 Chrome 的黄色 tooltip），但这个提示**无法直接通过 CSS 或 JS 修改内容**。不过你可以拦截默认行为，用自定义逻辑替代它。
阻止默认提示并手动显示自定义信息
关键点是监听 invalid 事件，调用 event.preventDefault() 阻止浏览器默认气泡，再用你自己的方式展示提示（如插入 DOM、修改 placeholder、添加 class 等）。
- 必须在
invalid事件中调用preventDefault()，否则原生提示仍会出现 - 该事件只在表单提交或元素失去焦点（且校验失败）等时机触发，不是实时的
- 建议同时监听
input或blur事件做实时反馈，提升体验
示例：为 input 添加红色边框 + 下方文字提示
假设有一个必填邮箱输入框：
JS 处理如下：
const emailInput = document.getElementById('email');
const errorSpan = document.getElementById('emailError');
emailInput.addEventListener('invalid', function (e) {
e.preventDefault(); // ⚠️ 必须加这句
emailInput.classList.add('invalid');
errorSpan.textContent = '请输入有效的邮箱地址';
});
// 可选：用户输入时清除错误状态
emailInput.addEventListener('input', function () {
if (this.checkValidity()) {
this.classList.remove('invalid');
errorSpan.textContent = '';
}
});
// 可选：失焦时重新校验并更新 UI
emailInput.addEventListener('blur', function () {
if (!this.checkValidity()) {
this.classList.add('invalid');
errorSpan.textContent = this.validationMessage || '请填写此项';
}
});
注意 validationMessage 的局限性
element.validationMessage 返回浏览器生成的默认提示文本（如 "Please fill in this field"），但它不可写、不可修改，仅可读。不同语言/浏览器返回值不同，不建议直接依赖它做国际化。更稳妥的做法是根据 validity 对象判断具体错误类型，再匹配你的提示文案：
if (emailInput.validity.valueMissing) {
message = '邮箱不能为空';
} else if (emailInput.validity.typeMismatch) {
message = '邮箱格式不正确';
} else if (emailInput.validity.tooShort) {
message = '长度不够';
}
补充：submit 时统一处理所有无效字段
如果希望在表单提交时批量收集并高亮所有错误项，可以这样：
document.getElementById('myForm').addEventListener('submit', function (e) {
const invalidFields = this.querySelectorAll(':invalid');
invalidFields.forEach(field => {
field.classList.add('invalid');
const msg = field.name === 'email' ? '邮箱格式错误' : '此项必填';
// 找到对应的 error span 并更新
});
if (invalidFields.length > 0) {
e.preventDefault(); // 阻止提交
}
});
不复杂但容易忽略的是：invalid 事件本身不会冒泡，所以不能委托到 form 上监听；每个需自定义的表单控件都得单独绑定。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
