当前位置: > > > HTML5 - 用Modernizr检测浏览器对表单和表单验证的支持情况

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

不同浏览器对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>
评论0