js实现reportvalidity
使用 JavaScript 实现 reportValidity
reportValidity 是 HTML5 表单验证 API 的一部分，用于检查表单或表单元素的有效性，并以浏览器原生方式显示验证错误消息。以下是实现方法：
原生表单元素的 reportValidity
可以直接调用表单或表单元素的 reportValidity 方法：
const form = document.querySelector('form');
const isValid = form.reportValidity();
if (isValid) {
// 表单验证通过
} else {
// 表单验证失败
}自定义验证逻辑
如果需要自定义验证逻辑，可以结合 setCustomValidity 和 reportValidity：
const input = document.querySelector('#myInput');
input.setCustomValidity(''); // 清除之前的自定义错误
if (!input.value) {
input.setCustomValidity('此字段不能为空');
}
input.reportValidity();兼容性处理
对于不支持 reportValidity 的旧浏览器，可以添加 polyfill：
if (!HTMLFormElement.prototype.reportValidity) {
HTMLFormElement.prototype.reportValidity = function() {
if (this.checkValidity()) return true;
const btn = document.createElement('button');
this.appendChild(btn);
btn.click();
this.removeChild(btn);
return false;
};
}验证多个字段
可以遍历表单的所有字段并验证：
function validateForm(form) {
let isValid = true;
Array.from(form.elements).forEach(element => {
if (!element.reportValidity()) isValid = false;
});
return isValid;
}注意事项
reportValidity会触发浏览器原生的验证提示样式- 自定义验证消息需要先调用
setCustomValidity - 对于动态添加的表单控件，需要重新绑定验证逻辑
