js实现reportvalidity
使用 reportValidity() 方法实现表单验证
reportValidity() 是 HTML5 表单元素的一个方法，用于触发浏览器的内置表单验证并显示验证结果。以下是实现方法：
HTML 结构示例
<form id="myForm">
<input type="text" id="username" required minlength="3">
<input type="email" id="email" required>
<button type="button" id="validateBtn">验证表单</button>
</form>JavaScript 实现
document.getElementById('validateBtn').addEventListener('click', function() {
const form = document.getElementById('myForm');
const isValid = form.reportValidity();
if(isValid) {
console.log('表单验证通过');
}
});自定义验证消息
可以通过 setCustomValidity() 方法设置自定义验证消息：
const emailInput = document.getElementById('email');
emailInput.addEventListener('input', function() {
if(!emailInput.validity.valid) {
emailInput.setCustomValidity('请输入有效的电子邮件地址');
} else {
emailInput.setCustomValidity('');
}
});检查单个字段的验证状态
可以使用 checkValidity() 方法检查单个字段的验证状态：
const usernameInput = document.getElementById('username');
if(!usernameInput.checkValidity()) {
usernameInput.reportValidity();
}验证样式定制
通过 CSS 可以定制无效字段的样式：
input:invalid {
border-color: red;
}
input:valid {
border-color: green;
}注意事项
reportValidity()方法会显示浏览器默认的验证提示气泡- 现代浏览器都支持此方法，但旧版浏览器可能需要 polyfill
- 表单必须有
novalidate属性才会阻止默认的提交时验证行为
