| // 内容为：www.cnblogs.com/polk6 console.log(document.getElementById('webURL').checkValidity()); // => false ：验证不通过 // 内容为：http://www.cnblogs.com/polk6 console.log(document.getElementById('webURL').checkValidity()); // => true ：验证通过 |
void setCustomValidity(string msg) ：设置校验不通过时的自定义信息
说明：在此元素上弹出一个警告框，显示自定义信息。
注意：只有表单验证时才会显示自定义的警告信息。
参数：
msg {string} ：设置需要显示的信息。若为空值，将关闭警告框。
示例：
HTML：
| <form> <p>新的密码：<input type="password" id="newPwd" oninput="validityPwd()" required /></p> <p>确认密码：<input type="password" id="newPwdConfirm" 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(''); } } |
新的控件
<input>元素的type属性的值，决定了<input>元素显示什么控件。
HTML5中，给<input>增加了许多新的控件，如color、date、email、month、number、range、search、tel、time、url、week等等。
若浏览器不支持新的控件，将默认以文本框展示(type="text")。
简单介绍
-
<input>元素type属性的值：
color ：颜色控件。<>
date ：日期控件。<>
email ：电子邮件地址输入框。<>
month ：年月日历控件。<>
number ：数值输入框。<>
range ：滑动条。<>
search ：搜索框。<>
tel ：电话号码输入框。<>
time ：时间控件。<>
url ：网址输入框。<>
week ：周数控件。<>
type="color" ：颜色控件
说明：显示一个颜色控件，点击选中需要的颜色。
属性：
value {string} ：设置或获取颜色控件的值，值的格式要为："#rrggbb"。
示例：
| <input type="color" /> |
