CSS :invalid 选择器

如果 input 元素中的值是非法的，实时提醒

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
span{
    display:none;
    color:#f00;
}
input:invalid + span{
    display:block;
}
</style>
</head>
<body>

<h3> :invalid 选择器实例演示。</h3>
<input type="email" value="supportEmail" />
<span>格式不正确</span>
<p>请输入合法 e-mail 地址，查看样式变化。</p>

</body>
</html>

：

CSS :invalid 选择器

推荐阅读