HTML5 - 使用HTML5Forms让旧浏览器支持表单新特性,表单验证

对于不支持HTML5表单验证的浏览器,虽然我们可以先用Modernizr判断后使用自定义的验证代码。但如果表单很多,或者需要验证地方很多,那这样就略嫌麻烦。
我们还可以使用HTML5Forms.js库,它可以自动使老旧的浏览器兼容HTML5表单新特性。地址是:https://github.com/zoltan-dulac/html5Forms.js

1,加载所有的webforms功能(以表单验证为例)
(1)将下载下来的压缩包解压,把其中shared文件夹(包含子文件夹)复制到你需要的位置
(2)除了引用html5Forms.js,还需要引用Modernizr的表单检测模块

<下图可以看到在IE8下也很好的支持了非空验证。>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>必填验证</title>
  <script type="text/javascript" src="./shared/js/modernizr.com/Modernizr-2.5.3.forms.js"></script>
  <script type="text/javascript" src="./shared/js/html5Forms.js" data-webforms2-support="all" data-webforms2-force-js-validation="true"> </script>
</head>
<body>
    <form id="form1" action="#" >
      <input type="text" required/> 
      <input type="submit" value="提交">
    </form>
</body>
</html>

2,选择性的使用部分功能
由于HTML5Forms是一个模块化的库,所以我们可以选择性的使用它的一部分功能。这样保证页面不会加载过多无用的东西,提升效率。
比如:如果只要基本的验证,必填字段,和占位符功能。可以如下使用

<script type="text/javascript" src="./shared/js/modernizr.com/Modernizr-2.5.3.forms.js"></script>
<script type="text/javascript" src="./shared/js/html5Forms.js"
    data-webforms2-support="validation,placeholder"
    data-webforms2-force-js-validation="true">
</script>

3,HTML5Forms库还支持许多表单特性(如滑动条,日期选择器,选色器等)
支持input控件的如下type类型:range,date,datetime,datetime-local,week,color
HTML5 - 使用HTML5Forms让旧浏览器支持表单新特性,表单验证_第1张图片

附:IE8下使用HTML5Forms报 ‘console’未定义 错误的解决办法
由于IE8/9在未开启控制台的情况下是不会构造console对象的!所以这时我们按下F12打开控制台会发现就不会有问题了。
解决办法是:把webforms2_src.js中console代码注释掉即可。

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

你可能感兴趣的:(html5,浏览器,表单)