你的浏览器禁用了JavaScript, 请开启后刷新浏览器获得更好的体验!
&link href=&Styles/bootstrap.css& rel=&stylesheet& />
&link href=&Styles/bootstrapValidator.css& rel=&stylesheet& />
&script src=&Scripts/jquery-1.10.2.min.js&>&/script>
&script src=&Scripts/bootstrap.min.js&>&/script>
&script src=&Scripts/bootstrapValidator.js&>&/script>
引入这些文件之后
参照demo中的attribute.html 中的例子 怎么没有验证呢
官方api 上有例子的
//登录验证
$(&#Form&).bootstrapValidator({
message: 'This value is not valid',
excluded: [':disabled'],
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
validators: {
notEmpty: {
message: '电子邮箱不能为空'
emailAddress: {
message: '输入不是有效的邮箱地址'
password: {
validators: {
notEmpty: {
message: '密码不能为空'
}).on('success.form.bv', function(e) {
e.preventDefault();
alert(&验证通过&);
要回复问题请先或
浏览: 8079
关注: 3 人1600人阅读
【JavaScript】（5）
【bootstrap】
& & & &最近做的项目，前台使用的bootstrap框架。对于前台框架来说，验证是必不可少的。对于常用的一些校验规则，如果有一个例子会更好的。虽然有提供validator的，但是感觉不太好用。所以记录一下常用的几种校验方式。
使用前提，必须是bootstrap框架。然后引入到项目中。
客户端前台自校验
& & & &这种校验方式，validator已经封装的很好了。只是在写前台界面的时候要用以下这种结构：
class="form-group"&
class="col-lg-3 control-label"&Full name&
class="col-lg-4"&
type="text" class="form-control" name="firstName"
placeholder="First name" required
data-bv-notempty-message="firstName不能为空(提示语)"
& & & &上面的这种结构只需要写相应的校验方式，对data-bv……进行替换 或添加属性即可。
校验常用方式
data-bv-notempty-message="XXX不能为空"
长度限制校验
data-bv-stringlength="true" data-bv-stringlength-min="6" data-bv-stringlength-max="30" data-bv-stringlength-message="这个字段长度不得小于6，不得超过30 "
type="email" data-bv-emailaddress-message="The input is not a valid email address"
日期格式校验
data-bv-date="false" data-bv-date-format="YYYY/MM/DD" data-bv-date-message="The birthday is not valid"
前后台交互校验
& & & &对于前后太交互校验，最常用的是在ajax的回调函数中进行校验。以下是一个例子，可以当作模版使用。
$('#defaultForm').bootstrapValidator({
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'
captcha: {
validators: {
callback: {
message: 'Wrong answer',
callback: function(value, validator) {
var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
return value ==
& & & &这种校验方式写法容易理解，只需要在field 下面 写上需要校验的字段并指明校验方式即可。
& & & &对于有前后台交互的，只需要写上callback方法即可完成校验。
表单提交前校验
这种方式，是对上面一种写法的补充，例子如下：
$('#defaultForm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
.on('success.form.bv', function(e) {
e.preventDefault();
var $form = $(e.target);
var bv = $form.data('bootstrapValidator');
$.post($form.attr('action'), $form.serialize(), function(result) {
console.log(result);
}, 'json');
& & & &对于表单提交前验证，这种方式，主要是对上述校验的第二种保护，只需要添加on方法即可。
& & & &对于成熟的框架来说，都会有很方便的写法，这样才会发挥出框架的作用。我们要做的就是学会使用，快速的开发。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：118198次
积分：6749
积分：6749
排名：第2335名
原创：135篇
评论：2299条
(2)(4)(4)(4)(4)(4)(4)(4)(3)(5)(3)(4)(4)(4)(3)(3)(2)(3)(3)(3)(3)(4)(2)(3)(5)(3)(4)(4)(2)(5)(2)(2)(2)(4)(2)(3)(5)(2)(1)(1)(2)(4)(1)(1)实用又漂亮的BootstrapValidator表单验证插件
作者：沉默王二
字体：[ ] 类型：转载 时间：
这篇文章主要为大家详细介绍了好用又漂亮的BootstrapValidator表单验证插件，感兴趣的小伙伴们可以参考一下
本文推荐一款twitter做的bootstrapValidator.js，本身bootstrap就是twitter做的，那么使用原配的validator也就更值得信赖。从百度上搜bootstrapValidator会出现很多款，但我只推荐这款：
一、一睹为快
为了简便的介绍，这里只做为空的check。
二、资源引用
下载完资源包后，你可以看到如下的目录。
然后把以下三个文件引入到你项目。
&link type="text/css" rel="stylesheet" href="${ctx}/components/validate/css/bootstrapValidator.css" /&
&script type="text/javascript" src="${ctx}/components/validate/js/bootstrapValidator.js"&&/script&
&script type="text/javascript" src="${ctx}/components/validate/js/language/zh_CN.js"&&/script&
三、会员名称不为空项目配置
&form class="form-signin required-validate" action="${ctx}/login" method="post" onsubmit="return validateCallback(this)"&
&div class="form-group"&
&div class="row"&
&label&账户&/label&
&input class="form-control" type="text" autofocus name="username" placeholder="请输入会员编号" autocomplete="off"
data-bv-notempty /&
data-bv-notempty表示该会员编号要做为空check。
form-group的div是必须的，否则会报“too much recursion”错误。
form表单提交的时候会执行validateCallback方法，该方法在第五步中具体介绍。
四、页面加载完成后启用bootstrap validator
$(function() {
// validate form
$("form.required-validate").each(function() {
var $form = $(this);
$form.bootstrapValidator();
// 修复bootstrap validator重复向服务端提交bug
$form.on('success.form.bv', function(e) {
// Prevent form submission
e.preventDefault();
在form表单上加上‘class=”required-validate”'属性，然后通过jquery获取对应form表单，对其执行默认的bootstrapValidator加载。
一定要注意上面代码中注释部分代码，具体介绍可参照下方修复BootstrapValidator重复提交的bug，具体内容如下
BootstrapValidator很漂亮，但漂亮的脸蛋下往往会隐藏杀机，这不，出现了重复提交的bug。
解决办法：
// validate form
$("form.required-validate", $p).each(function() {
var $form = $(this);
$form.bootstrapValidator().on('success.form.bv', function(e) {
// 阻止默认事件提交
e.preventDefault();
为BootstrapValidator设置on方法，其key为success.form.bv，value为e.preventDefault();。
调查结果：
1.当不使用BootstrapValidator时，就不会出现如图提示问题。
2.只有首次点击提交，会重复提交两次，而接下来重新输入用户名后，就单次提交了。
bug发生环境：
代码如下:&form class="required-validate" action="${ctx}/mem/login?callbackType=forward" method="post" onsubmit="return validateCallback(this, tabAjaxDone)" type="login"&
&button type="submit" style="width: 100%;" class="btn btn-default"&提交&/button&
这是一个普通的form表单，action中为请求地址，form中有onsubmit方法，主要是为了验证表单，然后发送请求，最后回调tabAjaxDone方法。
1.form表单肯定没有问题，如果没有bootstrap validate，那是一点问题都没有。
2.之前使用jquery validate的时候也没有问题。
3.那么问题只能发生在bootstrap validate上了。
4.而bootstrap validate的默认使用上也是没有问题的，因为只有首次点击提交时才会重复提交。
5.那么这可能是bootstrap validate有默认的提交请求。
再查看validate对象，可以看到它默认有很多事件，其中formsuccess的嫌疑最大，也就是说有可能是其再次触发了提交请求。
// validate form
$("form.required-validate", $p).each(function() {
var $form = $(this);
$form.bootstrapValidator();
// .on('success.form.bv', function(e) {
// 阻止默认事件提交
e.preventDefault();
1.在页面初次加载的时候，BootstrapValidator需要按照上述方式进行加载，方可进行前端数据校验。
2.你已经看到注释的代码，也许你已经猜得到，这就是解决办法。没错，为form加上该事件处理，使用e.preventDefault();阻止默认事件提交。
五、form表单提交时验证项目
function validateCallback(form, callback, confirmMsg) {
YUNM.debug("进入到form表单验证和提交");
var $form = $(form);
var data = $form.data('bootstrapValidator');
if (data) {
// 修复记忆的组件不验证
data.validate();
if (!data.isValid()) {
type : form.method || 'POST',
url : $form.attr("action"),
data : $form.serializeArray(),
dataType : "json",
cache : false,
success : callback || YUNM.ajaxDone,
error : YUNM.ajaxError
validateCallback中获取form表单后，通过isValid方法可以返回表单验证是否通过。
当表单验证通过后，再通过ajax将表单提交到服务端。
以上就是关于本文的全部内容，希望对大家的学习有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具This page describes the public methods provided by the plugin.
After initializing the form with the plugin using $(form).bootstrapValidator(options), there are two ways to call the plugin method:
// Get plugin instance
var bootstrapValidator = $(form).data('bootstrapValidator');
// and then call method
bootstrapValidator.methodName(parameters)
$(form).bootstrapValidator(methodName, parameters);
The first way mostly returns the BootstrapValidator instance, meanwhile the second one always returns the jQuery object representing the form.
So, it's possible to chain methods as below:
// The first way
.data('bootstrapValidator')
.updateStatus('birthday', 'NOT_VALIDATED')
.validateField('birthday');
// The second one
.bootstrapValidator('updateStatus', 'birthday', 'NOT_VALIDATED')
.bootstrapValidator('validateField', 'birthday');
defaultSubmit
defaultSubmit() & Submit the form using default submission.
It also does not perform any validations when submitting the form. It might be used when you want to submit the form right inside the .
disableSubmitButtons
disableSubmitButtons(disabled) & Disable or enable the submit buttons
Description
Can be true or false
enableFieldValidators
enableFieldValidators(field, enabled) & Enable/disable all validators to given field
Description
The field name
If true, enable field validators. If false, disable field validators
getFieldElements
getFieldElements(field) & Retrieve the field elements by given name.
Returns array of jQuery element representing the field, or null if the fields are not found.
Description
The field name
isValid() & Returns true if all form fields are valid. Otherwise, returns false.
Ensure that the
method is already called after calling this one.
resetForm(resetFormData) & Reset form. It hides all error elements and feedback icons. All the fields are marked as not validated yet.
Description
resetFormData
If true, the method resets the fields which have validator rules.
$(form).bootstrapValidator(options);
$(form).data('bootstrapValidator').resetForm();
The updateStatus method might be used when a field validity is effected by other filed.
For example, the form below asks user for credit card expiration. The expiration is valid if it is in the range of next month and next 10 year.
Expiration
&form id="paymentForm" class="form-horizontal">
&div class="form-group">
&label class="col-lg-3 control-label">Expiration&/label>
&div class="col-lg-2">
&input type="text" class="form-control" placeholder="Month" name="expMonth" />
&div class="col-lg-2">
&input type="text" class="form-control" placeholder="Year" name="expYear" />
$(document).ready(function() {
$('#paymentForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
expMonth: {
validators: {
notEmpty: {
message: 'The expiration month is required'
message: 'The expiration month can contain digits only'
callback: {
message: 'Expired',
callback: function(value, validator) {
value = parseInt(value, 10);
= validator.getFieldElements('expYear').val(),
currentMonth = new Date().getMonth() + 1,
currentYear
= new Date().getFullYear();
if (year == '') {
year = parseInt(year, 10);
if (year > currentYear || (year == currentYear && value > currentMonth)) {
validator.updateStatus('expYear', 'VALID');
expYear: {
validators: {
notEmpty: {
message: 'The expiration year is required'
message: 'The expiration year can contain digits only'
callback: {
message: 'Expired',
callback: function(value, validator) {
value = parseInt(value, 10);
= validator.getFieldElements('expMonth').val(),
currentMonth = new Date().getMonth() + 1,
currentYear
= new Date().getFullYear();
currentYear + 10) {
if (month == '') {
month = parseInt(month, 10);
if (value > currentYear || (value == currentYear && month > currentMonth)) {
validator.updateStatus('expMonth', 'VALID');3933人阅读
Javaweb（26）
本篇推荐一款twitter做的bootstrapValidator.js，本身bootstrap就是twitter做的，那么使用原配的validator也就更值得信赖。从百度上搜bootstrapValidator会出现很多款，但我只推荐这款（突然感觉自己有点“库【Steve 库里】吹”的感觉）。
一、一睹为快
为了简便的介绍，这里只做为空的check。
二、资源引用
下载完资源包后，你可以看到如下的目录。
然后把以下三个文件引入到你项目。
type="text/css" rel="stylesheet" href="${ctx}/components/validate/css/bootstrapValidator.css" /&
type="text/javascript" src="${ctx}/components/validate/js/bootstrapValidator.js"&&
type="text/javascript" src="${ctx}/components/validate/js/language/zh_CN.js"&&
三、会员名称不为空项目配置
class="form-signin required-validate" action="${ctx}/login" method="post" onsubmit="return validateCallback(this)"&
class="form-group"&
class="row"&
class="form-control" type="text" autofocus name="username" placeholder="请输入会员编号" autocomplete="off"
data-bv-notempty /&
data-bv-notempty表示该会员编号要做为空check。
form-group的div是必须的，否则会报“too much recursion”错误。
form表单提交的时候会执行validateCallback方法，该方法在第五步中具体介绍。
四、页面加载完成后启用bootstrap validator
$(function() {
$("form.required-validate").each(function() {
var $form = $(this);
$form.bootstrapValidator();
$form.on('success.form.bv', function(e) {
e.preventDefault();
在form表单上加上‘class=”required-validate”’属性，然后通过jquery获取对应form表单，对其执行默认的bootstrapValidator加载。
一定要注意上面代码中注释部分代码，具体介绍可参照。
五、form表单提交时验证项目
function validateCallback(form, callback, confirmMsg) {
YUNM.debug("进入到form表单验证和提交");
var $form = $(form);
var data = $form.data('bootstrapValidator');
if (data) {
data.validate();
if (!data.isValid()) {
return false;
type : form.method || 'POST',
url : $form.attr("action"),
data : $form.serializeArray(),
dataType : "json",
cache : false,
success : callback || YUNM.ajaxDone,
error : YUNM.ajaxError
return false;
validateCallback中获取form表单后，通过isValid方法可以返回表单验证是否通过。
当表单验证通过后，再通过ajax将表单提交到服务端。
感谢您阅读【】，如果王二的博客给您带来一丝帮助或感动，我（也就是王二）将不甚荣幸。
如果您碰巧喜欢，可以留言或者私信我，这将是我鼓捣更多优秀文章的最强动力。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：373923次
积分：4151
积分：4151
排名：第5164名
原创：92篇
评论：416条
文章：17篇
阅读：97596
文章：12篇
阅读：33491
文章：15篇
阅读：35230
(3)(1)(5)(8)(2)(5)(14)(8)(4)(5)(5)(1)(2)(1)(4)(3)(2)(6)(7)(7)}