// 内容为： console.log(document.getElementById('webURL').checkValidity()); // => false ：验证不通过 // 内容为： console.log(document.getElementById('webURL').checkValidity()); // => true ：验证通过

  

2) void setCustomValidity(string msg) ：设置校验不通过时的自定义信息

说明：在此元素上弹出一个警告框，显示自定义信息。

注意：只有表单验证时才会显示自定义的警告信息。

参数：

msg {string} ：设置需要显示的信息。若为空值，将关闭警告框。

示例：

HTML：

<form> <p>新的密码：<input type="password" oninput="validityPwd()" required /></p> <p>确认密码：<input type="password" oninput="validityPwd()" /></p> <input type="submit" /> </form>

JavaScript：

// 校验2个密码是否一致 var validityPwd = function(){ var newPwd = document.getElementById('newPwd'); var newPwdConfirm = document.getElementById('newPwdConfirm'); if(newPwd.value != newPwdConfirm.value){ newPwdConfirm.setCustomValidity('两次密码输入不一致'); }else{ newPwdConfirm.setCustomValidity(''); } }

 

 

3. 新的控件

<input>元素的type属性的值，决定了<input>元素显示什么控件。

HTML5中，给<input>增加了许多新的控件，如color、date、email、month、number、range、search、tel、time、url、week等等。

若浏览器不支持新的控件，将默认以文本框展示(type="text")。

 

2.1 简单介绍

<input>元素type属性的值：

color ：颜色控件。<>

date ：日期控件。<>

email ：电子邮件地址输入框。<>

month ：年月日历控件。<>

number ：数值输入框。<>

range ：滑动条。<>

search ：搜索框。<>

tel ：电话号码输入框。<>

time ：时间控件。<>

url ：网址输入框。<>

week ：周数控件。<>

 

2.2 详细介绍 1) type="color" ：颜色控件

说明：显示一个颜色控件，点击选中需要的颜色。

属性：

value {string} ：设置或获取颜色控件的值，值的格式要为："#rrggbb"。

示例：

<input type="color" />

 

2) type="date" ：日期控件

说明：显示一个日期控件，提供年月日的选择或自行输入。

属性：

value {string} ：设置或获取日期控件的值，值的格式要为："yyyy-MM-dd"。

示例：

<input type="date" value="2016-04-29" />

 

3) type="email" ：电子邮件地址输入框

说明：显示一个只能输入电子邮件格式的输入框。

属性：

multiple ：添加此属性后支持输入多个电子邮件地址，必须以','逗号隔开。

示例：

<input type="email" multiple />

 

4) type="month" ：年月控件

说明：提供一个只能选择年、月的日历控件。

属性：

value {string} ：设置或获取控件的值，值的格式要为："yyyy-MM"。

示例：

<input type="month" value="2016-04" />

 

5) type="number" ：数值输入框

说明：只能输入数值相关字符，如数字、.(小数点)、-(负号)等。

属性：max表示数值最大值；min表示数值最小值；step表示微调按钮每次跳动的大小。

示例：

<input type="number" value="11.5" />

 

 

6) type="range" ：滑动条

说明：以滑动条的形式表示数值。

属性：max表示数值最大值；min表示数值最小值。

示例：

<input type="range" max="100" min="0" value="80" />

 

 

7) type="search" ：搜索框

说明：在Chrome中搜索框没内容时就像普通的文本输入框，当有内容时右边有个'x'符号，用以清除文本内容。

示例：

<input type="search" />

 

 

8) type="tel" ：电话号码输入框

说明：电话号码的格式非常多，可包含数字、横线、括号等。浏览器并没有制定电话号码格式，只是在移动端浏览器使用时默认显示数字键盘。

示例：

<input type="tel" />

 

9) type="time" ：时间控件

说明：显示一个时间控件，提供时间的选择或自行输入。

属性：

value {string} ：设置或获取时间控件的值，值的格式要为："HH:mm",、"HH:mm:ss" 或 "HH:mm:ss.SSS"。

示例：

<input type="time" value="12:30" />

　

 

10) type="url" ：网址输入框

说明：输入的网址要加上协议前缀；如、https:// 等。

示例：

<input type="url" />

 

 

11) type="week" ：周数控件

说明：显示一个可选择年数、周数的日历控件。

属性：

value {string} ：设置或获取周数控件的值，值的格式要为："yyyy-Www"。(格式中的W字符不能省略，并且ww周数要为2位数)

示例：

<input type="week" value="2016-W01"/>

 

  

==================================系列文章==========================================

本篇文章：6.4 HTML5 input元素新的特性

Web开发之路系列文章