Bootstrap怎么使用表单验证插件bootstrapValidator
这篇文章给大家分享的是有关Bootstrap怎么使用表单验证插件bootstrapValidator的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
创新互联客户idc服务中心,提供成都联通服务器托管、成都服务器、成都主机托管、成都双线服务器等业务的一站式服务。通过各地的服务中心,我们向成都用户提供优质廉价的产品以及开放、透明、稳定、高性价比的服务,资深网络工程师在机房提供7*24小时标准级技术保障。
插件介绍
先上一个图:
下载地址:https://github.com/nghuuphuoc/bootstrapvalidator
使用提示
中文化:
下载插件后,将\js\bootstrapValidator\language\zh_CN.js 引入文件,即实现中文化
提交前验证表单:
1 2 3 4186 187 188 189 190 191 192 340 341BootstrapValidator demo 5 6 7 8 9 10 11 12 13 14 15 16 1718
19 20
25 2621 22
23
Sign up
24
看331行,点击提交时,用
$('#defaultForm').bootstrapValidator('validate');
触发表单验证
下面是碰到的一个坑:
bootstrapValidator默认逻辑是当表单验证失败时,把按钮给变灰色。
但是项目中,button并不在form内部,是通过事件绑定来ajax提交的。那么问题来了:
项目需要当form验证失败时,不执行所绑定的后续事件。百度半天找不到相关资料,最后还是要靠google:
$("#yourform").submit(function(ev){ev.preventDefault();}); $("#submit").on("click", function(){ var bootstrapValidator = $("#yourform").data('bootstrapValidator'); bootstrapValidator.validate(); if(bootstrapValidator.isValid()) $("#yourform").submit(); else return; });
酱紫就可以判断表单验证是否通过了。
感谢各位的阅读!关于Bootstrap怎么使用表单验证插件bootstrapValidator就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
名称栏目:Bootstrap怎么使用表单验证插件bootstrapValidator
标题网址:http://pwwzsj.com/article/jphogj.html