Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）

前端技术 2023/09/03 JavaScript

本文给大家介绍如何判断表单验证的实例代码，在没给大家介绍正文之前，先给大家介绍下插件。

插件介绍

先上一个图：


下载地址：https://github.com/nghuuphuoc/bootstrapvalidator

使用提示

中文化：

下载插件后，将\\js\\bootstrapValidator\\language\\zh_CN.js 引入文件，即实现中文化

提交前验证表单：

更丰富一点的表单验证例子：http://www.jq22.com/yanshi522，直接上代码：

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div class=\"container\">
<div class=\"row\">
<!-- form: -->
<section>
<div class=\"col-lg- col-lg-offset-\">
<div class=\"page-header\">
<h>Sign up</h>
</div>
<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>
<div class=\"col-lg-\">
<input type=\"text\" class=\"form-control\" name=\"lastName\" placeholder=\"Last name\" />
</div>
</div>
<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>
</div>
<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>
</div>
<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>
</div>
<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>
</div>
<div class=\"form-group\">
<label class=\"col-lg- control-label\">Gender</label>
<div class=\"col-lg-\">
<div class=\"radio\">
<label>
<input type=\"radio\" name=\"gender\" value=\"male\" /> Male
</label>
</div>
<div class=\"radio\">
<label>
<input type=\"radio\" name=\"gender\" value=\"female\" /> Female
</label>
</div>
<div class=\"radio\">
<label>
<input type=\"radio\" name=\"gender\" value=\"other\" /> Other
</label>
</div>
</div>
</div>
<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>
</div>
<div class=\"form-group\">
<label class=\"col-lg- control-label\">Languages</label>
<div class=\"col-lg-\">
<div class=\"checkbox\">
<label>
<input type=\"checkbox\" name=\"languages[]\" value=\"english\" /> English
</label>
</div>
<div class=\"checkbox\">
<label>
<input type=\"checkbox\" name=\"languages[]\" value=\"french\" /> French
</label>
</div>
<div class=\"checkbox\">
<label>
<input type=\"checkbox\" name=\"languages[]\" value=\"german\" /> German
</label>
</div>
<div class=\"checkbox\">
<label>
<input type=\"checkbox\" name=\"languages[]\" value=\"russian\" /> Russian
</label>
</div>
<div class=\"checkbox\">
<label>
<input type=\"checkbox\" name=\"languages[]\" value=\"other\" /> Other
</label>
</div>
</div>
</div>
<div class=\"form-group\">
<label class=\"col-lg- control-label\">Programming Languages</label>
<div class=\"col-lg-\">
<div class=\"checkbox\">
<label>
<input type=\"checkbox\" name=\"programs[]\" value=\"net\" /> .Net
</label>
</div>
<div class=\"checkbox\">
<label>
<input type=\"checkbox\" name=\"programs[]\" value=\"java\" /> Java
</label>
</div>
<div class=\"checkbox\">
<label>
<input type=\"checkbox\" name=\"programs[]\" value=\"c\" /> C/C++
</label>
</div>
<div class=\"checkbox\">
<label>
<input type=\"checkbox\" name=\"programs[]\" value=\"php\" /> PHP
</label>
</div>
<div class=\"checkbox\">
<label>
<input type=\"checkbox\" name=\"programs[]\" value=\"perl\" /> Perl
</label>
</div>
<div class=\"checkbox\">
<label>
<input type=\"checkbox\" name=\"programs[]\" value=\"ruby\" /> Ruby
</label>
</div>
<div class=\"checkbox\">
<label>
<input type=\"checkbox\" name=\"programs[]\" value=\"python\" /> Python
</label>
</div>
<div class=\"checkbox\">
<label>
<input type=\"checkbox\" name=\"programs[]\" value=\"javascript\" /> Javascript
</label>
</div>
</div>
</div>
<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>
</div>
<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>
</div>
</div>
</form>
</div>
</section>
<!-- :form -->
</div>
</div>
<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\'
},
fields: {
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: {
min: 6,
max: 30,
message: \'The username must be more than 6 and less than 30 characters long\'
},
regexp: {
regexp: /^[a-zA-Z0-9_\\.]+$/,
message: \'The username can only consist of alphabetical, number, dot and underscore\'
},
remote: {
url: \'remote.php\',
message: \'The username is not available\'
},
different: {
field: \'password\',
message: \'The username and password cannot be the same as each other\'
}
}
},
email: {
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: {
date: {
format: \'YYYY/MM/DD\',
message: \'The birthday is not valid\'
}
}
},
gender: {
validators: {
notEmpty: {
message: \'The gender is required\'
}
}
},
\'languages[]\': {
validators: {
notEmpty: {
message: \'Please specify at least one language you can speak\'
}
}
},
\'programs[]\': {
validators: {
choice: {
min: 2,
max: 4,
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 == sum;
}
}
}
}
}
});
// Validate the form manually
$(\'#validateBtn\').click(function() {
$(\'#defaultForm\').bootstrapValidator(\'validate\');
});
$(\'#resetBtn\').click(function() {
$(\'#defaultForm\').data(\'bootstrapValidator\').resetForm(true);
});
});
</script>
</body>
</html>

看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使用方法整理（推荐）的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对phpstudy网站的支持！

本文地址：https://www.stayed.cn/item/7625

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案