参考文档
- http://blog.csdn.net/nazhidao/article/details/51542508
- http://blog.csdn.net/u013938465/article/details/53507109
- http://www.cnblogs.com/v-weiwang/p/4834672.html?ptvd
- http://bootstrapvalidator.votintsev.ru/api/
引包
引入bootstrap-validator的css文件注意bootstrap-validator是bootstrap插件,因此依赖与bootstrap。
1 | <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"> |
引入js文件
1 | <script src="lib/jquery/jquery.js"></script> |
html结构
1 | <form id="demo_form"> |
初始化表单校验插件
bootstrap-validator插件会在表单提交的时候进行校验,如果校验成功了,表单会继续提交,但是如果校验失败了,就会阻止表单的提交。
1 | //使用表单校验插件 |
注册表单验证成功事件
当表单校验成功时,会触发success.form.bv
事件,此时会提交表单,这时候,通常我们需要禁止表单的自动提交,使用ajax进行表单的提交。
1 | //1.当提交按钮是: [type="submit"] 表单元素时,会在提交之前自动去进行表单验证 |
常用方法
获取validator实例(对象)
当我们初始化好表单校验插件时,我们可以通过以下方法来获取表单校验的validator实例,通过validator实例调用一些方法来完成某些功能。
1 | var validator = $("#form").data('bootstrapValidator'); //获取表单校验实例 |
1.手动触发表单验证
1 | //触发全部验证 |
2.获取当前表单验证状态
1 | // flag = true/false , 返回true表示验证通过 |
重置表单
重置表单中设置过校验的内容,将隐藏所有错误提示和图标。
1 | //方法1: |
1 | //方法2: |
更新字段的状态
BootstrapValidator在用户输入内容的时候,会做校验,当调用bootstrap的插件的方法可以手动会改变字段值的状态。可以使用updateStatus(field, status, validatorName)
方法更新字段的状态
1 | //参数说明: |