你有使用:valid和:invalid来校验表单吗？

是的，我知道在前端开发中，:valid 和 :invalid 是CSS伪类选择器，用于根据表单元素的有效性状态来设置样式。它们与HTML5的表单验证API一起使用。

具体来说：

• :valid: 当表单元素的值符合其定义的验证规则（例如，required、type="email"、pattern 等）时，该伪类选择器将应用样式。
• :invalid: 当表单元素的值不符合其定义的验证规则时，该伪类选择器将应用样式。

以下是一些使用示例：

<input type="email" required placeholder="Enter your email">
<input type="submit" value="Submit">

<style>
input:valid {
  border: 2px solid green;
}

input:invalid {
  border: 2px solid red;
}
</style>

在这个例子中：

• 如果用户输入了有效的电子邮件地址，电子邮件输入框的边框将变为绿色。
• 如果用户输入了无效的电子邮件地址或留空了必填字段，电子邮件输入框的边框将变为红色。

一些需要注意的点：

• 这些伪类选择器只在表单元素获得焦点后才会生效，或者在表单提交时生效。
• 你可以结合JavaScript使用checkValidity()方法来手动触发验证并更新样式。
• 一些浏览器可能会对:invalid样式有默认设置，你可能需要覆盖这些默认样式。
• 可以使用setCustomValidity() 方法自定义错误信息，并通过:invalid 伪类选择器来显示自定义的错误提示。

总而言之，:valid 和 :invalid 是非常有用的CSS伪类选择器，可以帮助开发者轻松地实现表单验证的视觉反馈，提升用户体验。