这里需要说一下，bootstrapvalidator的帮助文档写的比较简单，对于remote验证器的说明更是如此，在经历多方测试之后才明白如何使用这个验证器。
一个典型的ajax验证代码如下:
服务端验证代码(使用spring mvc)如下:
* 返回String类型的结果
* 检查用户名的合法性,如果用户已经存在，返回false，否则返回true(返回json数据，格式为{"valid",true})
@RequestMapping(value = "/checkNameExistsMethod1", produces = "application/charset=UTF-8")
public @ResponseBody
String checkNameValidMethod1(@RequestParam String name) {
boolean result = true;
List&Employee& lstEmployees = employeeService.getAllEmployees();
for (Employee employee : lstEmployees) {
if (employee.getName().equals(name)) {
result = false;
Map&String, Boolean& map = new HashMap&&();
map.put("valid", result);
ObjectMapper mapper = new ObjectMapper();
String resultString = "";
resultString = mapper.writeValueAsString(map);
} catch (JsonProcessingException e) {
e.printStackTrace();
return resultS
这里需要说明的是bootstrap的remote验证器需要的返回结果一定是json格式的数据 :
{"valid":false} //表示不合法，验证不通过
{"valid":true} //表示合法，验证通过
如果返回任何其他的值，页面验证将获取不到验证结果导致无法验证。
附一段完整的远程remote验证的代码加说明：
$(function(){/* 文档加载，执行一个函数*/
$('#defaultForm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {/*input状态样式图片*/
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
fields: {/*验证：规则*/
username: {//验证input项：验证规则
message: 'The username is not valid',
validators: {
notEmpty: {//非空验证：提示消息
message: '用户名不能为空'
stringLength: {
message: '用户名长度必须在6到30之间'
threshold :
6 , //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
url: 'exist2.do',//验证地址
message: '用户已存在',//提示消息
2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
type: 'POST'//请求方式
/**自定义提交数据，默认值提交当前input value
data: function(validator) {
password: $('[name="passwordNameAttributeInYourForm"]').val(),
whatever: $('[name="whateverNameAttributeInYourForm"]').val()
regexp: /^[a-zA-Z0-9_\.]+$/,
message: '用户名由数字字母下划线和.组成'
password: {
message:'密码无效',
validators: {
notEmpty: {
message: '密码不能为空'
stringLength: {
message: '用户名长度必须在6到30之间'
identical: {//相同
field: 'password', //需要进行比较的input name值
message: '两次密码不一致'
different: {//不能和用户名相同
field: 'username',//需要进行比较的input name值
message: '不能和用户名相同'
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
repassword: {
message: '密码无效',
validators: {
notEmpty: {
message: '用户名不能为空'
stringLength: {
message: '用户名长度必须在6到30之间'
identical: {//相同
field: 'password',
message: '两次密码不一致'
different: {//不能和用户名相同
field: 'username',
message: '不能和用户名相同'
regexp: {//匹配规则
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
validators: {
notEmpty: {
message: '邮件不能为空'
emailAddress: {
message: '请输入正确的邮件地址如：'
message: 'The phone is not valid',
validators: {
notEmpty: {
message: '手机号码不能为空'
stringLength: {
message: '请输入11位手机号码'
regexp: /^1[3|5|8]{1}[0-9]{9}$/,
message: '请输入正确的手机号码'
message: '邀请码',
validators: {
notEmpty: {
message: '邀请码不能为空'
stringLength: {
message: '请输入正确长度的邀请码'
regexp: /^[\w]{8}$/,
message: '请输入正确的邀请码(包含数字字母)'
.on('success.form.bv', function(e) {//点击提交之后
// Prevent form submission
e.preventDefault();
// Get the form instance
var $form = $(e.target);
// Get the BootstrapValidator instance
var bv = $form.data('bootstrapValidator');
// Use Ajax to submit form data 提交至form标签中的action，result自定义
$.post($form.attr('action'), $form.serialize(), function(result) {
//do something...
阅读(...) 评论()Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）
转载 &更新时间：日 10:52:26 & 作者：WoodK
这篇文章主要介绍了Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
本文给大家介绍如何判断表单验证的实例代码，在没给大家介绍正文之前，先给大家介绍下插件。
先上一个图：
下载地址：
下载插件后，将\js\bootstrapValidator\language\zh_CN.js 引入文件，即实现中文化
提交前验证表单：
更丰富一点的表单验证例子：http://www.jq22.com/yanshi522，直接上代码：
&!DOCTYPE html&
&title&BootstrapValidator demo&/title&
&link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/&
&link rel="stylesheet" href="dist/css/bootstrapValidator.css"/&
&!-- Include the FontAwesome CSS if you want to use feedback icons provided by FontAwesome --&
&!--&link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/../css/font-awesome.css" /&--&
&script type="text/javascript" src="vendor/jquery/jquery-...min.js"&&/script&
&script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"&&/script&
&script type="text/javascript" src="dist/js/bootstrapValidator.js"&&/script&
&div class="container"&
&div class="row"&
&!-- form: --&
&div class="col-lg- col-lg-offset-"&
&div class="page-header"&
&h&Sign up&/h&
&form id="defaultForm" method="post" class="form-horizontal" action="target.php"&
&div class="form-group"&
&label class="col-lg- control-label"&Full name&/label&
&div class="col-lg-"&
&input type="text" class="form-control" name="firstName" placeholder="First name" /&
&div class="col-lg-"&
&input type="text" class="form-control" name="lastName" placeholder="Last name" /&
&div class="form-group"&
&label class="col-lg- control-label"&Username&/label&
&div class="col-lg-"&
&input type="text" class="form-control" name="username" /&
&div class="form-group"&
&label class="col-lg- control-label"&Email address&/label&
&div class="col-lg-"&
&input type="text" class="form-control" name="email" /&
&div class="form-group"&
&label class="col-lg- control-label"&Password&/label&
&div class="col-lg-"&
&input type="password" class="form-control" name="password" /&
&div class="form-group"&
&label class="col-lg- control-label"&Retype password&/label&
&div class="col-lg-"&
&input type="password" class="form-control" name="confirmPassword" /&
&div class="form-group"&
&label class="col-lg- control-label"&Gender&/label&
&div class="col-lg-"&
&div class="radio"&
&input type="radio" name="gender" value="male" /& Male
&div class="radio"&
&input type="radio" name="gender" value="female" /& Female
&div class="radio"&
&input type="radio" name="gender" value="other" /& Other
&div class="form-group"&
&label class="col-lg- control-label"&Birthday&/label&
&div class="col-lg-"&
&input type="text" class="form-control" name="birthday" /& (YYYY/MM/DD)
&div class="form-group"&
&label class="col-lg- control-label"&Languages&/label&
&div class="col-lg-"&
&div class="checkbox"&
&input type="checkbox" name="languages[]" value="english" /& English
&div class="checkbox"&
&input type="checkbox" name="languages[]" value="french" /& French
&div class="checkbox"&
&input type="checkbox" name="languages[]" value="german" /& German
&div class="checkbox"&
&input type="checkbox" name="languages[]" value="russian" /& Russian
&div class="checkbox"&
&input type="checkbox" name="languages[]" value="other" /& Other
&div class="form-group"&
&label class="col-lg- control-label"&Programming Languages&/label&
&div class="col-lg-"&
&div class="checkbox"&
&input type="checkbox" name="programs[]" value="net" /& .Net
&div class="checkbox"&
&input type="checkbox" name="programs[]" value="java" /& Java
&div class="checkbox"&
&input type="checkbox" name="programs[]" value="c" /& C/C++
&div class="checkbox"&
&input type="checkbox" name="programs[]" value="php" /& PHP
&div class="checkbox"&
&input type="checkbox" name="programs[]" value="perl" /& Perl
&div class="checkbox"&
&input type="checkbox" name="programs[]" value="ruby" /& Ruby
&div class="checkbox"&
&input type="checkbox" name="programs[]" value="python" /& Python
&div class="checkbox"&
&input type="checkbox" name="programs[]" value="javascript" /& Javascript
&div class="form-group"&
&label class="col-lg-3 control-label" id="captchaOperation"&&/label&
&div class="col-lg-2"&
&input type="text" class="form-control" name="captcha" /&
&div class="form-group"&
&div class="col-lg-9 col-lg-offset-3"&
&button type="submit" class="btn btn-primary" name="signup" value="Sign up"&Sign up&/button&
&button type="submit" class="btn btn-primary" name="signup2" value="Sign up 2"&Sign up 2&/button&
&button type="button" class="btn btn-info" id="validateBtn"&Manual validate&/button&
&button type="button" class="btn btn-info" id="resetBtn"&Reset form&/button&
&/section&
&!-- :form --&
&script type="text/javascript"&
$(document).ready(function() {
// Generate a simple captcha
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
$('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
$('#defaultForm').bootstrapValidator({
// live: 'disabled',
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
firstName: {
validators: {
notEmpty: {
message: 'The first name is required and cannot be empty'
lastName: {
validators: {
notEmpty: {
message: 'The last name is required and cannot be empty'
username: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and cannot be empty'
stringLength: {
message: 'The username must be more than 6 and less than 30 characters long'
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
url: 'remote.php',
message: 'The username is not available'
different: {
field: 'password',
message: 'The username and password cannot be the same as each other'
validators: {
emailAddress: {
message: 'The input is not a valid email address'
password: {
validators: {
notEmpty: {
message: 'The password is required and cannot be empty'
identical: {
field: 'confirmPassword',
message: 'The password and its confirm are not the same'
different: {
field: 'username',
message: 'The password cannot be the same as username'
confirmPassword: {
validators: {
notEmpty: {
message: 'The confirm password is required and cannot be empty'
identical: {
field: 'password',
message: 'The password and its confirm are not the same'
different: {
field: 'username',
message: 'The password cannot be the same as username'
birthday: {
validators: {
format: 'YYYY/MM/DD',
message: 'The birthday is not valid'
validators: {
notEmpty: {
message: 'The gender is required'
'languages[]': {
validators: {
notEmpty: {
message: 'Please specify at least one language you can speak'
'programs[]': {
validators: {
message: 'Please choose 2 - 4 programming languages you are good at'
captcha: {
validators: {
callback: {
message: 'Wrong answer',
callback: function(value, validator) {
var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[]) + parseInt(items[]);
return value ==
// Validate the form manually
$('#validateBtn').click(function() {
$('#defaultForm').bootstrapValidator('validate');
$('#resetBtn').click(function() {
$('#defaultForm').data('bootstrapValidator').resetForm(true);
看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();
以上所述是小编给大家介绍的Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具如下代码：
&input type="hidden" name="productId"/&
$("#addForm").bootstrapValidator({
productId: {
validators: {
notEmpty: {
message: '请选择一个商品'
这样的配置并没有在提交的时候对表单元素productId进行验证，那是因为bootstrapValidator默认配置对于&隐藏域（:hidden）、禁用域（:disabled）、那啥域（:not(visible)）&是不进行验证的。
解决方法：
$("#addForm").bootstrapValidator({
//excluded:[":hidden",":disabled",":not(visible)"] ,//bootstrapValidator的默认配置
excluded:[":disabled"],//关键配置，表示只对于禁用域不进行验证，其他的表单元素都要验证
productId: {
validators: {
notEmpty: {
message: '请选择一个商品'
我们往往会有这样的需求，如下图：
在选择商品之后会在productName里面展示商品名称给用户看，而在productId这个隐藏域里面放一个商品的ID。
一般情况下这样的操作是由程序来完成的，
$("input[name='productId']").val(data.productId);
bootstrapValidator这个插件不能捕获这样的&程序赋值事件&，所以这里不能达到验证的效果，所以我们需要做一个小小的变通：
$("#addForm").bootstrapValidator({
//excluded:[":hidden",":disabled",":not(visible)"] ,//bootstrapValidator的默认配置
excluded:[":disabled"],//关键配置，表示只对于禁用域不进行验证，其他的表单元素都要验证
productId: {
trigger:"change", //问题2.关键配置
validators: {
notEmpty: {
message: '请选择一个商品'
//赋值之后触发一次&change&事件
$("input[name='productId']").val(data.productId).change();
这样以后bootrapValidator会因为触发了&change&事件，而捕获，达到验证的效果
阅读(...) 评论()系统已开启自动识别垃圾评论机制，识别到的自动封号，下载出错或者资源有问题请联系全栈客服QQ
BootstrapValidator验证表单插件
所需积分：40
亲，积分不够，
或联系QQ人工充值
亲，vip会员下载原创作品 积分5 折，其余免积分下载
PS:尊重原创作者劳动成果，感谢分享！
充值方式： 或联系QQ人工充值没有更多推荐了，
不良信息举报
举报内容：
使用bootstrapValidator无法正常显示提示信息的问题
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！}