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

原文链接：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>