BootstrapValidator不觸發(fā)校驗的實現(xiàn)代碼
一、前言
BootstrapValidator是基于bootstrap3的jquery表單驗證插件,是最適合bootstrap框架的表單驗證插件,在工作中用到此框架就寫下自己在使用中積累的一些心得
二、問題描述
當按鈕的類型為submit時,使用bootstrapValidator的isValid()能夠使驗證表單正常工作,但當button的type類型為button時,只調(diào)用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:'用戶名只能由字母、數(shù)字和下劃線'
}
}
},
userName: {
message: '用戶名格式不正確',
validators: {
notEmpty: {
message: '用戶名不能為空'
},
stringLength: {
min: 6,
max: 30,
message: '用戶名長度大于6位并且小于30位'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: '用戶名只能由字母、數(shù)字和下劃線'
}
}
},
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不觸發(fā)校驗的實現(xiàn)代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- JS組件Form表單驗證神器BootstrapValidator
- 基于jQuery 實現(xiàn)bootstrapValidator下的全局驗證
- 實用又漂亮的BootstrapValidator表單驗證插件
- BootstrapValidator超詳細教程(推薦)
- Bootstrap中的表單驗證插件bootstrapValidator使用方法整理(推薦)
- jquery插件bootstrapValidator數(shù)據(jù)驗證詳解
- Bootstrapvalidator校驗、校驗清除重置的實現(xiàn)代碼(推薦)
- jquery插件bootstrapValidator表單驗證詳解
- bootstrapValidator bootstrap-select驗證不可用的解決辦法
- bootstrapvalidator之API學(xué)習(xí)教程
相關(guān)文章
JavaScript中判斷整字類型最簡潔的實現(xiàn)方法
這篇文章主要介紹了JavaScript中判斷整字類型最簡潔的實現(xiàn)方法,本文給出多個判斷整數(shù)的方法,最后總結(jié)出一個最短、最簡潔的實現(xiàn)方法,需要的朋友可以參考下2014-11-11
Bootstrap面板(Panels)的簡單實現(xiàn)代碼
這篇文章主要為大家詳細介紹了Bootstrap面板(Panels)的簡單實現(xiàn)代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-03-03

