原文链接：http://www.javaarch.net/jiagoushi/693.htm
Html5 表单验证和style css验证支持
看看下面的这个示例：
<h2>Login</h2>
<form action="" autocomplete="off">
<label for="username">Username</label>
<input id="username" name="username" pattern="[a-zA-Z0-9]{5,}" title="Minimum 5 letters or numbers." required>
<!-- Credit: http://stackoverflow.com/questions/5458076/regex-in-new-pattern-attr-for-html5-forms -->
<label for="password">Password</label>
<input id="password" name="password" type="password" pattern=".{5,}" title="Minmimum 5 letters or numbers." required>
<p/>
<input type="submit" class="btn" value="Login">
</form>
<h2>Register</h2>
<form action="" autocomplete="off">
<label for="username2">Username</label>
<input id="username2" name="username" pattern="[a-zA-Z0-9]{5,}" title="Minmimum 5 letters or numbers." required>
<label for="password2">Password</label>
<input id="password2" name="password" type="password" pattern=".{5,}" title="Minmimum 5 letters or numbers." required>
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
<label for="url">Homepage</label>
<input id="url" name="url" type="url">
<p/>
<input type="submit" class="btn" value="Register">
</form>
验证很强大，如果不支持，我们可以使用jquery的验证模块，而且server端也会做验证，所以浏览器不支持对于页面没任何影响。
在css中，有几个伪类可以支持对表单验证不通过情况下的样式进行设置：
valid invalid required optional in-range out-of-range read-only read-write
html5 表单验证不通过的css设置示例如下：
<style>
input:required {
border-style:solid;
border-width:thick;
}
input:valid {
background-color: #adff2f;
}
input:invalid {
background-color: #f08080;
}
</style>