版权声明：本文为博主原创文章，未经博主允许不得转载。如有转载请留言，谢谢~ https://blog.csdn.net/qq_38209578/article/details/87858113
本文主要介绍H5的input标签type自带属性校验，以及输入框自带校验样式。
一、type的属性如下：
color（定义拾色器）
date（定义日期字段）
datetime（定义日期字段）
datetime-local（定义日期字段）
month（定义日期字段的月）
week（定义日期字段的周）
time（定义日期字段的时、分、秒）
email（定义用于 e-mail 地址的文本字段）
number（定义带有 spinner 控件的数字字段）
range（定义带有 slider 控件的数字字段）
search（定义用于搜索的文本字段）
tel（定义用于电话号码的文本字段）
url（定义用于 URL 的文本字段）
二、CSS :invalid 选择器
如果 input 元素中的值是非法的，设置样式为红色：
input:invalid
{
border:2px solid red;
}
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
input:invalid
{
border:2px solid red;
}
</style>
</head>
<body>
<h3> :invalid 选择器实例演示。</h3>
<input type="email" value="supportEmail" />
<p>请输入合法 e-mail 地址，查看样式变化。</p>
</body>
</html>
效果图如下：
