利用:valid和:invalid伪类结合CSS与JavaScript，可精准控制表单验证样式，提升用户体验。通过设置边框颜色、显示错误提示、添加过渡动画及动态更新提示信息，实现高效、直观的表单验证反馈机制。
CSS路径定位表单验证状态，简单来说，就是利用
和
这两个伪类，精准控制表单元素在验证通过和未通过时的样式。这不仅仅是变个颜色那么简单，它关乎用户体验，直接影响表单的填写效率和正确率。
解决方案：
和
伪类会根据表单元素的验证状态自动应用。关键在于结合CSS选择器，精确指定需要改变样式的元素。
例如，我们有一个输入框：
立即学习
“
前端免费学习笔记（深入）
”；
现在，我们希望在输入框验证通过时，边框变成绿色，验证失败时，边框变成红色。CSS代码如下：
这样，当用户输入符合email格式的内容时，输入框边框会变成绿色；否则，会变成红色。
更进一步，我们还可以结合其他选择器，例如相邻兄弟选择器
，来控制错误提示信息的显示：
这样，只有当输入框内容无效时，错误提示信息才会显示出来。
如何处理复杂的表单验证场景，例如自定义验证？
除了HTML5自带的验证规则，我们经常需要自定义验证规则。这时，
和
依然可以发挥作用，但需要结合JavaScript来实现。
首先，我们需要使用JavaScript来执行自定义验证，并设置表单元素的validity状态。例如：
这段代码监听输入框的
事件，当输入内容包含
和
时，认为验证通过，否则认为验证失败，并设置自定义的错误信息。
然后，CSS代码保持不变：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
这样，CSS会根据JavaScript设置的validity状态，自动应用相应的样式。
如何处理不同
浏览器
对
和
的支持差异？
虽然
和
是标准CSS伪类，但不同浏览器对它们的实现可能存在差异。例如，某些浏览器可能在页面加载时，即使输入框为空，也会应用
样式。
为了解决这个问题，我们可以使用JavaScript来添加一个类名，例如
，表示用户已经与输入框交互过。
这段代码监听输入框的
事件，当输入框失去焦点时，添加
类名。
然后，修改CSS代码：
这样，只有当输入框被用户交互过，并且验证状态发生变化时，才会应用相应的样式。这可以避免在页面加载时，出现不必要的
样式。
如何优化表单验证的用户体验？
仅仅改变边框颜色是不够的，好的用户体验需要更丰富的反馈。例如，我们可以添加动画效果，或者显示更详细的错误提示信息。
例如，我们可以使用CSS的
属性，让边框颜色变化更平滑：
或者，我们可以使用JavaScript动态更新错误提示信息：
这段代码根据输入框的
状态，动态更新错误提示信息的内容。这可以给用户更清晰的反馈，帮助他们更快地找到并解决问题。
:valid:invalid:valid:invalidinput:valid {
border-color: green;
}
input:invalid {
border-color: red;
}+
请输入正确的邮箱地址.error-message {
display: none; /* 默认隐藏错误信息 */
}
input:invalid + .error-message {
display: block; /* 当输入框验证失败时，显示错误信息 */
color: red;
}:valid:invalidconst input = document.querySelector('input[type="email"]');
input.addEventListener('input', () => {
if (input.value.includes('@') && input.value.includes('.')) {
input.setCustomValidity(''); // 验证通过
} else {
input.setCustomValidity('请输入正确的邮箱地址'); // 验证失败
}
});input@.input:valid {
border-color: green;
}
input:invalid {
border-color: red;
}:valid:invalid:valid:invalid:invalidtouchedconst input = document.querySelector('input[type="email"]');
input.addEventListener('blur', () => {
input.classList.add('touched');
});blurtouchedinput.touched:valid {
border-color: green;
}
input.touched:invalid {
border-color: red;
}:invalidtransitioninput {
transition: border-color 0.3s ease;
}
input:valid {
border-color: green;
}
input:invalid {
border-color: red;
}
const input = document.querySelector('input[type="email"]');
const errorMessage = document.querySelector('.error-message');
input.addEventListener('input', () => {
if (input.validity.valueMissing) {
errorMessage.textContent = '邮箱地址不能为空';
} else if (input.validity.typeMismatch) {
errorMessage.textContent = '请输入正确的邮箱地址';
} else {
errorMessage.textContent = '';
}
});validity