您的位置：首页 > Web前端 > HTML5

HTML5 - 用Modernizr检测浏览器对表单和表单验证的支持情况

2016-03-17 14:55 661 查看

不同浏览器对HTML5表单的支持不一样。比如：IE9就不支持HTML5表单验证。这样就需要我们对不支持的浏览器提供备用方案。

利用Modernizr可以检测浏览器对各种HTML5表单验证功能的支持情况。比如：Modernizr.input.required属性可以检测出浏览器是否支持required属性。其它属性还有：pattern，placeholder，autofocus，max，min和step。

当检测到浏览器不支持时，我们就可以使用自己写的验证代码。

下面以给必填字段提供自定义验证代码为例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>必填验证</title>
<script src="modernizr.min.js"></script>
<script>
function validateForm() {
//不支持required属性，因此必须自己编写检测代码
if(!Modernizr.input.required){

//首先获取表单里的所有元素
var inputElements = document.getElementById("form1").elements;

//遍历数组，检测每个元素
for(var i=0;i<inputElements.length;i++) {
//检测当前元素是否必填
if(inputElements[i].hasAttribute("required")){
//如果空表示表单验证失败
if(inputElements[i].value=="") return false;
}
}
return true;
}
}
</script>
</head>
<body>
<form id="form1" action="#" onsubmit="return validateForm()">
<input type="text" required/>
<input type="submit" value="提交">
</form>
</body>
</html>

原文出自：www.hangge.com 转载请保留原文链接：http://www.hangge.com/blog/cache/detail_860.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航