Html5 表单验证和style css验证支持

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>