仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1211|回复: 9
打印 上一主题 下一主题

[HTML5] 来看看:HTML5表单考证功效:撑持老旧扫瞄器

[复制链接]
莫相离 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:09:42 | 显示全部楼层 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
WHATWG版和W3C版的HTML5规范虽然根源相同,在一些领域却已经产生分歧。破洛洛文章简介:HTML5的超等复杂表单考证体例带进IE和其他老扫瞄器.
品范例:静态效果(静态JS、jQuery作品)作品形貌:将HTML5的超等复杂表单考证体例带进IE和其他老扫瞄器制造思绪:编写一个插件,让老旧扫瞄器也能够利用html5语法来举行表达考证,只需在底层拦阻submit事务,发明不符考证划定规矩后使用jQuery触发invalid事务。开辟者只需复杂的绑定invalid事务,便可以完成以往很庞大的表单考证功效。
信任喜好奇怪事物的前端er已实验过了HTML5的表单考证功效,十分壮大的说。<input>中到场required就成为必填项了,
在pattern中写一个正则表达式,就可以强迫所填格局。上面是一个demo
<form>

<inputplaceholder="必需填3-5位的下划线,数字、字母"requiredpattern="w{3,5}">

<inputtype="submit">

</form>

<scriptsrc="http://code.jquery.com/jquery.js"></script>

<scriptsrc="form.html5.js"></script>

<script>

$("input").bind("invalid",function(e){

alert("毛病,必需填3-5位的下划线,数字、字母");

returnfalse;

});

$("html").submit(function(e){

if(e.isPropagationStopped()){

return;

}

alert("表单乐成提交");

returnfalse;

});

</script>
十分复杂有木有?我们所必要做的只要两步步
1.将考证划定规矩写成正则表达式放在input标签中的pattern属性里
2.jQuery拦阻input的invalid事务
完成这两步,就已能够在古代扫瞄器下完成表单考证了。

可是那末怎样撑持老旧扫瞄器呢?只需增加一行代码
<scriptsrc="form.html5.js"></script>
同时还必要下载这三个文件并确保三个文件在统一目次下。



  • form.html5.js
  • form.html5.htc
  • input.html5.htc
  • select.htc
(select.htc的用处与表单考证有关.)

当你产生以下情形,能够回帖接洽我



  • 文件部署到服务器情况后生效。
  • 你发明了让表单考证变得更复杂的办法。
</p>
但他也直言说,这就像写软件时,在添加改善的新功能时,难免遭遇稳定性的问题,必须先把问题清除干净,才能推出新产品。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-7 16:39

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表