bootstrap validate表單驗證

引入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);
					} // 請求完成的處理,無論成功或失敗
					
				});
			}
		});
		
	}
}

圖示

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章