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

时间：2022-11-06 14:16:56

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

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

<下图可以看到在IE8下也很好的支持了非空验证。>
HTML5 - 使用HTML5Forms让旧浏览器支持表单新特性，表单验证

<!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让旧浏览器支持表单新特性，表单验证HTML5 - 使用HTML5Forms让旧浏览器支持表单新特性，表单验证

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

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

标签：

相关文章