HTML5 form标签之解放表单验证使用方法

1、html5 form标签之解放表单验证使用方法html中与form有关的东东新增属性个人理解formhtml5之前，表单内的从属元素需要放入标签中，现在可以为标签指定form标签即可点评：该功能解决了我们实际中碰到的一些问题，比如iframe模拟异步上传时，就必需将写到form外。formactionformmethod该属性用于按钮（submit）让表单提交页面可又按钮控制formmethod指定各按钮提交方式placehoder该属性十分实用，用于文本框中显示提醒信息，十分实用的一属性listlist属性需要与datalist一同用法，相当于文本框，模拟select，十分适用的一个属性au

2、tofocus用于文本框主动猎取焦点，实用的东东新增input属性，解放验证，各扫瞄器支持不好tel用于电话url验证urlemail验证邮箱date/time日期类验证，会浮现日期挑选插件哦。number只能是数字range控制数字范围color色彩挑选器，好东西啊。html5中增强了无数与form有关的属性，说实在的，这些东西真心贴心啊！很大程度上讲：彻低解放表单验证若不是考虑兼容性问题，老夫恨不得立刻投入其中，但一旦想起兼容性问题的话，你就会十分头疼！由于原本很好的东西，却是由于历史的缘由，反而会增强我们的工作量！在错的时光，做对的事情，他看起来是对的，事实上也是对的。但你会发觉，他错了

3、。增加页面元素项目个人理解figure/figcaption据说表示页面自立内容，移除后无影响，暂无发觉用处.details该标签有点意思，用于替代js中，元素收起绽开功能。最新ff都不支持个人觉得，既然提供了该标签应当提供属性表示上下绽开或者左右绽开；mark高亮显示，当真语义化progress丝们，可以告辞gif了，也不用div模拟百分比了，与windows区域全都的进度条浮现啦，异步文件上传越发完美！改良ol老夫就没实用过这个主。 以上元素属于可有可无的元素，不必赘述，接下来，本文明星对象登场： 文件api filelist与file对象： 在html4中，file标签只允许挑选一个文件

4、，但html5中，对file标签设置multiple属性后，变可以挑选多文件了！而，挑选后便会形成这里的filelist对象，即一个个file组成的对象列表，容易来说就是file数组。file对象具有2属性，name代表文件名（不包括路径），lastmodifieddate表示最后修改时光其实我们在html4中操作file时，可以猎取本地无数属性，比如文件大小，但是万恶的ie不支持，到ie9后才有所好转。所以想客户端提醒文件上传过大的学生放弃吧。 blob对象表示二进制原始数据，提供一slice办法拜访字节内部原始数据；size表示blob对象字节长度、type表示其mime类型，类型未知则返

5、回空字符串。来来，容易做一试验： 复制代码代码如下: 关于file$(document).ready(function () $(&39;wl&39;).click(function () var f = $(&39;file&39;)0; var s = &39;&39; ););文件上传 我们在ff中挑选后，提交，设个断点看看： file主角登场，就是他了，我们将之属性输出来看看： 真的是无奇不有啊！有了该属性就可以做无数事情了，但是。我们来看看ie7、8： 各位观众，人家压根没这个属性，所以一切百搭。话说，我觉得ie扫瞄器调试起来很疼痛，请

6、问各位大神有没有什么好的ie开发插件，就像ff的firebug，google自带的插件？ filereader接口filereader接口，可将文件读入内存，有了这个东东我们就可以很舒适的做预览了，但他的公用不止如此。filereader的四个办法：readasbinarystring 将文件读取为二进制码——通常我们将数据传给后端；readastext 将文件读取为文本——读取文本内容；readasurl 将文件读取为dataurl——普通是小文件，或者html；abort

7、 中断读取，由于文件过大等待时光就很长了 filereader接口大事：onabort 读取中断触发；onerror 读取失败触发；onloadstart 开头读取时触发；onprogress 读取中onload 读取胜利时触发；onloadend 读取完成后触发，无论胜利失败；光说不练不可，我们这里做个小试验： 复制代码代码如下: 我是一个小试验$(document).ready(function () var bt = $(&39;wl&39;);var file = $(&39;file&39;);var type = $(&39;type&

8、;39;);var result = $(&39;result&39;); var func = ;func.readasdataurl = function (file) /验证是否为if (!/image/w+/.test(file.type) alert(&39;非格式&39;);return false;var reader = new filereader();reader.readasdataurl(file);reader.onload = function (e) result.html(&39;&39;); func.reada

9、sbinarystring = function (file) var reader = new filereader();reader.readasbinarystring(file);reader.onload = function (e) result.html(this.result); func.readastext = function (file) var reader = new filereader();reader.readastext(file);reader.onload = function (e) result.html(this.result); bt.click

10、(function () if (functype.val() && typeof functype.val() = &39;function&39;) functype.val()(file0.files0);); );readasdataurlreadasbinarystringreadastext读取文件 用最新扫瞄器运行试试呢！我们再做一个推断，看看其大事执行挨次： reader.onload = function (e) alert(&39;onload&39;); reader.onprogress = functio

11、n (e) alert(&39;onprogress&39;); reader.onerror = function (e) alert(&39;onerror&39;); reader.onloadstart = function (e) alert(&39;onloadstart&39;); reader.onloaded = function (e) alert(&39;onloaded&39;); 此处详细应用： 复制代码代码如下: 容易上传body font-size: 14px;.image_upload margin

12、:10px; border: 1px solid e0e0e0; text-align: center; padding:5px; display: inline-block; position: relative; .image_upload img max-height: 150px; max-width: 150px; .image_upload .rate position: absolute; top: 6px; left: 6px; padding: 0 5px; color: white; background: black; border-radius: 5px; filter

13、:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity: 0.6; opacity: 0.6; .image_upload .delete background: url("images/del.png") no-repeat scroll 0 0 transparent; cursor: pointer; height: 16px; position: absolute; right: -6px; top: -6px; width: 16px; $(document).ready(function () v

14、ar j_bt_sub = $(&39;submitform&39;),j_form = $(&39;form&39;),j_state = $(&39;upstate&39;),j_file = $(&39;files&39;);var is_support = true; /推断是否支持高级特性，经测试若是不支持filereader与fileif (typeof filereader = &39;undefined&39;) is_support = false; j_file.change(function

15、() var file = j_file.get(0);if (!file.files0) is_support = false; /支持高级功能的扫瞄器if (is_support) files = file.files;for (var k = 0, len = files.length; k &39;);var img = $(&39;&39;);var rate = $(&39;0%&39;);var del = $(&39;&39;);up.append(img);up.append(rate);up.append(del);d

16、el.click(function () $(this).parent().remove(););j_state.append(up);)(k); /for else /不支持的话采纳传统方式); /此处应当支持平滑后退，后面考虑j_bt_sub.click(function (e) if (is_support) var file = j_file.get(0);files = file.files;for (var k = 0, len = files.length; k上传 拖放api其实之前，我还用jquery写了个拖放的插件呢。工作中遇到的一些东西【弹出窗口】【拖放】【异步文件上传】

17、但是集成在html5中固然更好！我们现在来看看这个东东。并且它的强大之处，就是不止在扫瞄器中拖动，这就不得了了哦（拖动上传）html5中默认对、链接可以拖放，其它元素需要设置draggable="true"才干拖放，事不宜迟，老夫马上去试试。 复制代码代码如下: 拖放的例子 请拖放document.ondragover = function (e) e.preventdefault();document.ondrop = function (e) e.preventdefault(); var source = document.getelementbyid

18、(&39;dragme&39;);var dest = document.getelementbyid(&39;text&39;);source.addeventlistener(&39;dragstart&39;, function (e) var dt = e.datatransfer;dt.setdata(&39;text/plain&39;, &39;您好&39; + new date();, false); dest.addeventlistener(&39;dragend&39;, function (e) e.preventdefault();, false); dest.addeventlistener(&39;drop&