html中input字母校验,H5的input标签type自带属性校验

本文主要介绍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;

}

完整代码如下：

菜鸟教程(runoob.com)

input:invalid

{

border:2px solid red;

}

:invalid 选择器实例演示。

请输入合法 e-mail 地址，查看样式变化。

效果图如下：