HTML5 - 用Modernizr检测浏览器对表单和表单验证的支持情况
来源:互联网 发布:信鸽推送demo php 编辑:程序博客网 时间:2024/04/27 16:09
不同浏览器对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
0 0
- HTML5 - 用Modernizr检测浏览器对表单和表单验证的支持情况
- opera浏览器对HTML5表单的支持情况
- Modernizr.js插件 检测浏览器对 CSS3 或 HTML5 功能支持情况
- Modernizr 检测浏览器是否支持HTML5元素
- Modernizr.js入门指南,检查浏览器对Html5和Css3的语法支持
- 检测浏览器是否支持HTML5/CSS3神器Modernizr
- 各浏览器对HTML5的支持情况
- 各浏览器对HTML5的支持情况
- Android 浏览器对 HTML5 的支持情况
- modernizr框架之表单验证
- Html5 表单验证和style css验证支持
- Html5 表单验证和style css验证支持
- HTML5 - 使用HTML5Forms让旧浏览器支持表单新特性,表单验证
- HTML5 - 各大浏览器对html5的支持情况
- HTML5和css3实例:制作HTML5验证的网页表单
- HTML5表单验证的例子
- HTML5的表单验证实例
- 五大主流浏览器对css3和html5的支持情况大比拼
- 详解QuickCocos2dX状态机模式设计
- linux负载均衡
- Maven学习总结(17)——深入理解maven灵活的构建
- 虚拟机Linux c++调用Python脚本的实现
- 如何停止Monkey测试
- HTML5 - 用Modernizr检测浏览器对表单和表单验证的支持情况
- 协程
- Concurrency Is Not Parallelism
- Android Studio如何集成Genymotion
- 包、访问修饰符
- 分享几个实用的Android开源项目(这是我摘抄的。。。o(╯□╰)o)
- 从Map、JSONObject取不存在键值对时的异常情况
- linux Daemon守护进程
- 【Java80小白建站系列】5.网站技术的选择以及相关软件的安装