本教程深入探讨了如何使用原生javascript为表单输入字段实现自定义验证状态（如`valid`和`invalid`类），以替代浏览器默认的伪类样式。文章揭示了在`input`事件中检查有效性状态时常见的时序问题，并提出了利用`change`事件结合`checkvalidity()`方法来确保在正确的时间点更新并应用自定义css类的解决方案，从而实现对表单验证视觉反馈的精确控制。
在现代Web开发中，表单验证是用户体验和数据完整性的关键环节。虽然浏览器提供了内置的HTML5验证和CSS伪类（如:valid和:invalid）来简化这一过程，但有时我们需要更精细的控制，例如在特定条件下显示或隐藏验证反馈，或者使用自定义的CSS类来匹配设计系统。本文将指导您如何使用原生JavaScript实现这种自定义的表单验证，并通过动态添加或移除CSS类来管理输入字段的有效性状态。
挑战：input事件中的时序问题
许多开发者在尝试实时验证并应用自定义类时，会自然而然地选择监听input事件。然而，当用户在输入框中键入时，input事件会立即触发，但此时浏览器内部的有效性状态（即element.validity对象）可能尚未完全更新到最新输入值对应的状态。这导致在input事件处理器内部检查element.validity.valid时，获取到的可能是上一个输入状态的值，从而造成自定义类应用不准确或出现视觉上的“闪烁”和错误反馈。
例如，考虑一个要求至少两个字符的输入字段。当用户输入第一个字符时，字段仍处于tooShort状态，但如果input事件立即检查，它可能会错误地判断为有效，或者在后续输入时，由于时序问题导致类应用混乱。
原始尝试可能如下所示：
立即学习“Java免费学习笔记（深入）”；
const firstName = document.querySelector("#first-name");
firstName.addEventListener("input", (e) => {
firstName.setCustomValidity(""); // 重置自定义验证信息
var val = firstName.validity.valid; // 此时可能获取到旧的有效性状态
firstName.classList.remove("valid", "invalid"); // 移除现有类
if (val === false) {
// 根据validity属性设置自定义错误信息并添加'invalid'类
if (firstName.validity.tooShort) {
firstName.setCustomValidity("First name must be 2 letters or longer.");
} else if (firstName.validity.patternMismatch) {
firstName.setCustomValidity("First name can only contain letters");
}
// 这里的setTimeout是为了延迟显示，但增加了复杂性且未解决根本的时序问题
setTimeout(() => {
firstName.reportValidity(); // 报告验证信息（通常显示浏览器默认提示）
firstName.classList.add("invalid");
}, 900);
} else if (val === true) {
firstName.classList.add("valid");
firstName.setCustomValidity(""); // 清空自定义验证信息
}
});上述代码的问题在于，input事件触发时，firstName.validity.valid可能仍反映的是输入前或输入过程中的旧状态。此外，使用setTimeout来延迟操作虽然可以规避一些视觉问题，但并未解决根本的验证时序问题，反而可能导致用户体验不佳。
解决方案：利用change事件和checkValidity()
解决上述时序问题的关键在于选择正确的事件监听器，并主动触发有效性状态的更新。change事件在输入字段的值发生改变并失去焦点时（或对于某些输入类型，如select，在选择改变时）触发。更重要的是，在change事件触发时，浏览器已经完成了对输入值的所有内置有效性检查，element.validity对象将反映最新的、准确的状态。
此外，HTMLInputElement提供了一个checkValidity()方法。调用此方法会强制浏览器立即执行所有内置的验证规则，并更新element.validity对象，同时返回一个布尔值，指示元素是否有效。这对于在任何时候都需要获取最新有效性状态的场景非常有用。
结合change事件和checkValidity()方法，我们可以构建一个健壮的自定义验证逻辑：
- 监听change事件：确保在输入值稳定且浏览器已完成内部验证后执行逻辑。
- 重置状态：在每次验证前，清除所有旧的自定义验证信息 (setCustomValidity("")) 和自定义CSS类 (classList.remove("valid", "invalid"))，以确保从一个干净的状态开始。
- 使用checkValidity()：调用此方法来强制更新validity对象，并获取当前的有效性状态。
- 根据validity对象应用类：根据element.validity对象中的具体属性（如tooShort, patternMismatch等）来设置自定义错误信息和应用invalid或valid类。
以下是修正后的代码示例：
const firstName = document.querySelector("#first-name");
firstName.addEventListener("change", (e) => {
// 1. 重置自定义验证信息和所有验证相关的CSS类
firstName.setCustomValidity("");
firstName.classList.remove("valid", "invalid");
// 2. 调用checkValidity()来强制更新validity状态并获取当前有效性
// 如果字段无效
if (!firstName.checkValidity()) {
// 根据具体的验证失败类型设置自定义错误信息
if (firstName.validity.tooShort) {
firstName.setCustomValidity("First name must be 2 letters or longer.");
} else if (firstName.validity.patternMismatch) {
firstName.setCustomValidity("First name can only contain letters");
}
// 添加'invalid'类
firstName.classList.add("invalid");
// 如果需要，可以调用reportValidity()来显示浏览器默认的错误提示
// firstName.reportValidity();
} else {
// 如果字段有效，添加'valid'类
firstName.classList.add("valid");
// 确保没有自定义错误信息
firstName.setCustomValidity("");
}
});代码解释：
- firstName.addEventListener("change", ...)：现在我们监听的是change事件。这意味着验证逻辑将在用户完成输入（例如，失去焦点或按回车键）后触发，此时validity状态是准确的。
- firstName.setCustomValidity("");：在每次验证前，清空任何先前的自定义验证消息，避免旧消息干扰。
- firstName.classList.remove("valid", "invalid");：移除所有可能的验证状态类，为重新评估做准备。
- if (!firstName.checkValidity()) { ... }：checkValidity()方法会强制浏览器检查元素的有效性，并更新validity对象。它返回true如果元素有效，false如果无效。这里我们检查它是否为false。
- firstName.validity.tooShort 和 firstName.validity.patternMismatch：这些是ValidityState对象的属性，它们精确地告诉我们为什么输入字段无效。我们可以根据这些属性设置特定的错误消息。
- firstName.classList.add("invalid"); 或 firstName.classList.add("valid");：根据checkValidity()的结果和validity对象的详细信息，动态添加相应的CSS类。
- firstName.reportValidity();：这个方法会触发浏览器显示默认的验证错误提示（通常是一个小气泡）。如果您完全依赖自定义CSS类来显示错误，并且不希望显示浏览器默认提示，则可以省略此行。
最佳实践与注意事项
-
事件选择：
- change事件：适用于需要最终、准确验证结果的场景，例如用户完成输入或提交表单时。它能有效避免在用户输入过程中频繁显示错误信息，提升用户体验。
- input事件：如果需要更实时的、字符级别的反馈（例如，显示密码强度），input事件仍然是合适的。但请注意，在这种情况下，您可能需要手动实现更复杂的逻辑来判断有效性，或者接受validity状态可能略有滞后的情况。对于严格的有效性判断和类应用，change事件通常更可靠。
-
CSS样式：确保您的CSS文件中有针对.valid和.invalid类的样式定义，例如：
input.invalid { border-color: red; box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25); } input.valid { border-color: green; box-shadow: 0 0 0 0.2rem rgba(0, 255, 0, 0.25); } -
表单提交验证：除了单个字段的实时验证，通常还需要在表单提交时进行整体验证。您可以在表单的submit事件监听器中遍历所有表单元素，并对每个元素调用checkValidity()。如果任何元素无效，可以阻止表单提交。
const form = document.querySelector("form"); form.addEventListener("submit", (e) => { if (!form.checkValidity()) { // 检查整个表单的有效性 e.preventDefault(); // 阻止表单提交 // 可以遍历字段并reportValidity()或添加invalid类 Array.from(form.elements).forEach(element => { if (!element.checkValidity()) { // 重新运行change事件的逻辑，确保所有invalid类都已应用 // 也可以直接element.reportValidity(); } }); } }); - 用户体验：虽然实时反馈很重要，但过早或过于频繁的错误提示可能会让用户感到沮丧。change事件通常提供了一个很好的平衡点，因为它在用户完成一个输入单元后才进行验证。
总结
通过利用change事件和checkValidity()方法，我们可以有效地解决在JavaScript中动态应用自定义CSS类进行表单验证时遇到的时序问题。这种方法提供了对验证反馈的精确控制，使得开发者能够创建更加灵活、符合设计规范且用户体验更佳的表单。理解不同事件的触发时机以及checkValidity()的作用，是实现健壮、自定义表单验证的关键。
