DIV CSS 佈局教程網

一、前言

BootstrapValidator是基於bootstrap3的jquery表單驗證插件，是最適合bootstrap框架的表單驗證插件，在工作中用到此框架就寫下自己在使用中積累的一些心得

二、問題描述

當按鈕的類型為submit時，使用bootstrapValidator的isValid()能夠使驗證表單正常工作，但當button的type類型為button時，只調用bootstrapValidator的isValid()方法無法正常工作。這時候就需要使用bootstrapValidator的validate()方法進行激活。

三、項目代碼

1、JSP中

<span style="font-size:14px;"><div id="addAdminDialog" class="modal fade" tabindex="-1"> 
<div class="modal-dialog cy-modal-dialog-f"> 
<div class="modal-content"> 
<div class="modal-header"> 
<button class="close" data-dismiss="modal"><span>×</span></button> 
<h4 class="modal-title" id="myLargeModalLabel">新增管理員</h4> 
</div> 
<div class="modal-body"> 
<form id="addAdminForm" method="post" action="${ctx}/admin/operator/add.htm" class="form-horizontal"> 
<div class="form-group"> 
<label class="form-label text-bold" for="">登錄名</label> 
<input class="form-control" placeholder="" type="text" name="loginName" id="addLoginName"/> 
</div> 
<div class="form-group"> 
<label class="form-label text-bold" for="">用戶名</label> 
<input class="form-control" placeholder="" type="text" name="userName" id="addUserName" /> 
</div> 
<div class="form-group"> 
<label class="form-label text-bold" for="">密碼</label> 
<input class="form-control" placeholder="" type="password" name="password" id="addPassword" /> 
</div> 
<div class="form-group"> 
<label class="form-label text-bold" for="">角色</label> 
<div class="form-group"> 
<div class="col-md-10 col-xs-10"> 
<div class="checkbox cy-nopadding" id="addRoles"> 
<c:forEach var="role" items="${roles}"> 
<label name="addRoleLabel" class="form-checkbox form-icon form-text"><input type="checkbox" id="addRole_${role.id}" name="roles" value="${role.id}"> ${role.roleName}</label> 
</c:forEach> 
</div> 
</div> 
</div> 
</div> 
</form> 
</div> 
<!--Modal footer--> 
<div class="modal-footer"> 
<button class="btn btn-primary" onclick="addAdmin();">確定</button> 
<button data-dismiss="modal" class="btn btn-default" type="button">取消</button> 
</div> 
</div> 
</div> 
</div></span> 

2、JS

<span style="font-size:14px;">var faIcon = { 
valid: 'glyphicon glyphicon-ok', 
invalid: 'glyphicon glyphicon-remove', 
validating: 'glyphicon glyphicon-refresh' 
} 
//新增管理員前台校驗 
$("#addAdminForm").bootstrapValidator({ 
message: 'This value is not valid', 
//反饋圖標 
feedbackIcons:faIcon, 
fields: { 
loginName:{ 
message:'登錄名無效', 
validators:{ 
notEmpty:{ 
message:'登錄名不能為空' 
}, 
StringLength:{ 
min:5, 
max:30, 
message:'用戶名長度大於6位並且小於30位' 
}, 
regexp:{ 
regexp:/^[a-zA-Z0-9_]+$/, 
message:'用戶名只能由字母、數字和下劃線' 
} 
} 
}, 
userName: { 
message: '用戶名格式不正確', 
validators: { 
notEmpty: { 
message: '用戶名不能為空' 
}, 
stringLength: { 
min: 6, 
max: 30, 
message: '用戶名長度大於6位並且小於30位' 
}, 
regexp: { 
regexp: /^[a-zA-Z0-9_]+$/, 
message: '用戶名只能由字母、數字和下劃線' 
} 
} 
}, 
password: { 
validators: { 
notEmpty: { 
message: '郵箱不能為空' 
}, 
emailAddress: { 
message: '輸入的不是一個有效的電子郵件地址' 
} 
} 
} 
} 
});</span> 

<span style="font-size:14px;">// 新增操作員 
function addAdmin() { 
/*手動驗證表單，當是普通按鈕時。*/ 
$('#addAdminForm').data('bootstrapValidator').validate(); 
if(!$('#addAdminForm').data('bootstrapValidator').isValid()){ 
return ; 
} 
$("#addAdminForm").ajaxSubmit({ 
dataType : 'json', 
type : "post", 
success : function(json) { 
if (json.status == "succ") { 
doQuery(); 
Modal.alert({ 
msg : "操作成功" 
}); 
$("#addAdminDialog").modal('hide'); 
} else { 
Modal.alert({ 
msg : json.msg 
}); 
} 
}, 
error : function() { 
Modal.alert({ 
msg : "操作失敗" 
}); 
} 
}); 
}</span> 

四、效果圖

以上所述是小編給大家介紹的BootstrapValidator不觸發校驗的實現代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！