在表单提交前检查字段成功状态，最直接的方法是在 submit 事件中调用 checkvalidity() 方法。该方法会验证所有受控字段是否符合其约束条件（如必填、格式等），如果所有字段都有效则返回 true，否则返回 false。通过监听 submit 事件并阻止默认行为，可以确保只有当所有字段都“成功”时表单才会真正提交。
如何判断单个字段的 validity 状态
要获取单个字段的详细成功状态，可以使用 validity 属性。这个属性是一个 ValidityState 对象，包含多个布尔值属性，如 valueMissing、typeMismatch 等。开发者可以通过检查这些属性来了解字段为何无效，从而提供具体的错误提示。
<script>
const form = document.getElementById('myForm');
const emailInput = document.getElementById('email');
form.addEventListener('submit', function(event) {
if (!emailInput.checkValidity()) {
event.preventDefault(); // 阻止提交
console.log('Email is invalid:', emailInput.validity);
}
});
</script>
如何处理自定义验证逻辑
对于浏览器内置验证无法覆盖的场景，需要结合 setCustomValidity() 方法。当调用此方法并传入非空字符串时，字段会被标记为无效；传入空字符串则恢复为有效。这允许开发者在 submit 事件中动态设置验证结果，从而实现复杂的业务逻辑校验。
Java 开发专家
精通 Java 21+，掌握虚拟线程、模式匹配和 Spring Boot 3.x 等现代特性。是 Java 生态系统（包括 GraalVM、Project Lo
下载
<script>
const form = document.getElementById('customForm');
const usernameInput = document.getElementById('username');
form.addEventListener('submit', function(event) {
if (usernameInput.value.length < 6) {
usernameInput.setCustomValidity('Username must be at least 6 characters');
event.preventDefault();
} else {
usernameInput.setCustomValidity(''); // 清除自定义错误
}
});
</script>
基于 checkValidity() 返回值的分支处理
当 checkValidity() 返回 false 时，意味着至少有一个字段未通过验证。此时程序通常会进入错误处理分支，例如显示错误消息或聚焦到第一个无效字段。若返回 true，则表单数据将被正常提交至服务器。这种基于布尔值的分支结构是前端表单验证的核心控制流。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
