css3中检验表单的required,focus,valid和invalid样式

CSS3中的表单验证：现代浏览器的魔法工具

===========================

你是否厌倦了为网页表单编写大量的JavaScript和正则表达式以验证用户输入？好消息是，HTML5带来了一些新的属性，可以让你摆脱这些繁琐的任务。通过简单地使用CSS和HTML，你就可以实现表单验证，让用户体验更加流畅。

这些新的伪类选择器如 `:required`、`:valid` 和 `:invalid`，它们像魔法一样在高级浏览器中发挥作用，如Chrome、Firefox、Safari以及IE9以上的版本。

`:required`：这个伪类选择器用于识别那些必填的表单元素。如果一个``元素有`required`属性，并且用户尝试提交表单时没有为它提供值，那么这个元素就会被`:required`伪类选择器捕捉到。

`:valid` 和 `:invalid`：这两个伪类选择器分别用于识别那些符合和不符合预期格式的表单元素。例如，对于一个email输入框，如果用户输入了一个有效的email地址，那么这个元素就会被`:valid`伪类选择器捕捉到；反之，如果用户输入了一个无效的email地址，那么这个元素就会被`:invalid`伪类选择器捕捉到。

通过CSS，你可以为这些伪类选择器定义样式。以下是一个简单的例子：

```css

input:required, input:valid, input:invalid {

border: 0 none;

outline: 0 none;

box-shadow: none;

-webkit-box-shadow: none; / Safari 和 Chrome /

-moz-box-shadow: none; / Firefox /

-ms-box-shadow: none; / IE9 /

-o-box-shadow: none; / Opera /

}

```

在上述代码中，无论输入是否有效或是否必填，所有输入元素都将拥有相同的样式：没有边框、没有轮廓，也没有阴影。你可以根据需要为不同的状态定义不同的样式。

无需再依赖JavaScript和正则表达式进行表单验证，只需利用HTML5的这些新特性，即可轻松实现表单的验证。这不仅简化了开发过程，而且提高了用户体验。现在，你可以专注于创建更出色的网页和应用程序，而无需担心繁琐的表单验证问题。