HTML5 新标签和属性（表单验证）

原创于 2017-07-13 15:42:07 发布 · 930 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #前端

HTML5 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种利用H5新特性进行表单验证的方法，通过required和optional属性结合CSS样式实现简单有效的验证机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近，博主项目中遇到一些需要涉及到H5新标签支持的项目，所以在这儿写出来，给大家看看你，也顺便学习学习，大神可以忽略。

首先是表单的一些属性，必填和非必填，当符合正则的时候背景颜色会改变。适合简单的表单验证

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*required是必填内容，optional是选填内容,如果不填写optional和required关键字，那么就默认为optional*/
		input:required{
			background: transparent;
		}
		input:optional{
			background: transparent;
		}
		/*invalid就是不符合规则的，valid则是符合规则的*/
		input:required:invalid{
			background: red;
		}
	</style>
</head>
<body>
	<form action="#">
		<input type="text" required pattern="[A-Z]{4}">
		<input type="text" optional>
	</form>
</body>
</html>

当不符合或者没有填写时显示效果