引入js文件
<script src="js/bootstrapValidator.min.js" type="text/javascript"></script>
<script src="js/bootstrapValidator_zh_CN.js" type="text/javascript"></script>
js代碼
$(document).ready(function () {
$("form").bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
merchant_name: {
message: '商戶全稱驗證失敗',
validators: {
notEmpty: {
message: '商戶全稱不能爲空'
}
}
},
email: {
validators: {
notEmpty: {
message: '郵箱地址不能爲空'
}
}
},
status: {
validators: {
notEmpty: {
message: '狀態不能爲空'
}
}
}
}
});
});
function submitForm(obj){
var $form = $(obj).parents("form").eq(0);
$form.data("bootstrapValidator").validate(); // 手動驗證
var isValid = $form.data("bootstrapValidator").isValid(); // 是否驗證成功
if(isValid){
bootbox.confirm({
message: "是否確認提交?",
callback: function(result){
if(!result){
return;
}
var dialog = showLoading();
var url = $form.attr("action");
$.ajax({
url: url,
type: "post",
async: true, // 是否異步請求(此處需這隻爲異步請求true,否則bootstrap的modal不會順序顯示)
cache: false, // 是否緩存此頁面,每次都請求服務器
contentType: "application/x-www-form-urlencoded", // 內容編碼類型,默認
dataType: "json", // 預期服務器返回數據格式
timeout: 60000, // 超時時間,60s
data: $form.serialize(), // 請求參數
beforeSend: function(xhr){
}, // 發送請求預處理
error: function(xhr, errMsg, e){
bootbox.alert("請求服務器失敗!");
}, // 請求服務器失敗的處理
dataFilter: function(data, type){
return data;
}, // 請求成功預處理,返回的值爲success的參數data
success: function(data){
bootbox.alert(JSON.stringify(data));
}, // 請求服務器成功的處理
complete: function(xhr, ts){
hideDialog(dialog);
} // 請求完成的處理,無論成功或失敗
});
}
});
}
}
圖示