要做出不一样的表单验证，我们需要了解一些伪类及css选择器
1. :required 和 :optional
2. :in-range 和 :out-of-range
3. :vaild 和 :invalid
4. :read-only 和 :read-write
其中， css 两种符号： +，～。“+”用来选择下一个元素，“～”用来选择同一父级下后续所有该类元素。
1- :required 和 :optional 选择器
<!DOCTYPE html>
<html>
<head>
<title>h5</title>
<meta charset="utf-8">
<style type="text/css">
.container{max-width: 400px;margin:20px auto;}
input,select,textarea{width: 240px;margin:10px 0;border:1px solid #999;padding:.5em 1em;}
label{color:#999;margin-left: 10px;}
input:required,textarea:required{border-right:3px solid #aa0088;}
input:optional,select:optional{border-right:3px solid #999;}
input:required +label::after{
content:"（必填）";/*添加内容*/
}
input:optional +label::after{
content:"（选填）";
}
input:focus,select:focus,textarea:focus{outline: 0}
input:required:focus,textarea:required:focus{
box-shadow: 0 0 3px 1px #aa0088;
}
input:optional:focus,select:optional:focus{
box-shadow: 0 0 3px 1px #999;
}
input[type="submit"]{
background-color: #cc00aa;
border:2px solid #aa0088;
padding:10px 0;
color:#fff;
}
input[type="submit"]:hover{
background-color: #aa0088;
}
</style>
</head>
<body>
<div class="container">
<form action="#">
<input type="name" required ><label>名称</label>
<input type="email" required ><label>邮箱</label>
<input type="tel" ><label>手机</label>
<input type="url" ><label>网址</label>
<select name="#">
<option value="1">非必填选项一</option>
<option value="2">非必填选项二</option>
<option value="3">非必填选项三</option>
<option value="4">非必填选项四</option>
</select>
<textarea name="#" cols="30" rows="10" placeholder="留言（必填）" required=""></textarea>
<input type="submit" value="提交表单">
</form>
</div>
</body>
</html>2. valid 和 invalid 以及动画效果
<!DOCTYPE html>
<html>
<head>
<title>CheckEmail</title>
<meta charset="utf-8">
<style type="text/css">
.container{margin:100px;position: relative;}
input{border:1px solid #999;outline: 0;width: 140px;height: 30px;
line-height: 30px;text-indent: 36px;transition: all .3s;
border-radius: 5px;}
span.title{position: absolute;;line-height: 30px;height: 30px;left: 2px;top: 2px;
transition: all .3s;}
input:focus,input:hover{
text-indent: 2px;
}
input:focus + span.title,input:hover + span.title{
transform: translateX(-120%);
}
input:valid ~label::after{content: "你输入的邮箱正确！"}
input:invalid ~label::after{content: "你输入的邮箱错误！"}
input：valid{border:1px solid white;}
input:invalid{border:1px solid orange;}
</style>
</head>
<body>
<div class="container">
<input type="email" id="mail" required placeholder="输入邮箱">
<span class="title">邮箱</span>
<label for="mail"></label>
</div>
</body>
</html>