本文实例讲述了Bootstrap简单实用的表单验证插件BootstrapValidator用法。分享给大家供大家参考，具体如下：
Bootstrap是现在非常流行的一款前端框架，这篇来介绍一款基于Bootstrap的验证插件BootstrapValidator。
先来看一下效果图（样式是不是还不错O(∩_∩)O哈哈~）。
Bootstrapvalidator下载地址：https://github.com/nghuuphuoc/bootstrapvalidator/?
引入对应的CSS和JS
添加验证规则
使用HTML添加验证。
对某一个标签添加验证规则，需要放在标签中，input标签必须有name属性值，此值为验证匹配的字段。其实就是要符合bootstrap表单结构。
初始化bootstrapValidator。
效果图。
使用data-bv-notempty 和 data-bv-notempty-message属性就可以简单进行非空验证。data-bv-notempty 有值就进行非空验证，data-bv-notempty-message 中的值为提示消息。
使用JS添加验证
HTML样式代码。
JS验证代码，其中fields属性中的值，需要和HTML标签中的name值一样，确定给那个标签添加验证。
效果如下。
AJAX后台交互验证，验证用户名是否存在。
后台验证返回格式必须为{“valid”, true or false} 的json数据格式。后台verifyUsername验证判断方法。
@RequestMapping(value="/verifyUsername")
@ResponseBody
public Map verifyUsername(String username){
Student stu = studentService.findByUsername(username);
Map map = new HashMap();
if (stu == null) {
map.put("valid", true);
}else{
map.put("valid", false);
}
return map;
}
效果如下。
下面是几个比较常见的验证规则。
- notEmpty：非空验证；
- stringLength：字符串长度验证；
- regexp：正则表达式验证；
- emailAddress：邮箱地址验证（都不用我们去写邮箱的正则了~~）
- base64：64位编码验证；
- between：验证输入值必须在某一个范围值以内，比如大于10小于100；
- creditCard：身份证验证；
- date：日期验证；
- ip：IP地址验证；
- numeric：数值验证；
- url：url验证；
- callback：自定义验证
- Form表单的提交
关于提交，可以直接用form表单提交即可。
也可以通过AJAX提交，提交按钮代码和form表单的提交按钮代码一样，通过id选中按钮绑定点击事件提交。
$("#btn").click(function () { //非submit按钮点击后进行验证，如果是submit则无需此句直接验证
$("form").bootstrapValidator('validate'); //提交验证
if ($("form").data('bootstrapValidator').isValid()) { //获取验证结果，如果成功，执行下面代码
alert("yes"); //验证成功后的操作，如ajax
}
});
效果图，这里验证通过后通过弹框提示的，方法中可以写AJAX提交代码。
页面完整代码。
到这里，BootstrapValidator验证插件的方法已经写的很全面了。不足地方欢迎大家下方留言指出！
可以使用在线HTML/CSS/Javascript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
PS：关于bootstrap布局，这里再为大家推荐一款本站的在线可视化布局工具供大家参考使用：
在线bootstrap可视化布局编辑工具：
http://tools.jb51.net/aideddesign/layoutit
希望本文所述对大家基于bootstrap的程序设计有所帮助。
