1.引入css與js

　　bootstrapValidator.min.css

　　bootstrapValidator.min.js

2.html中的modal代碼

<div class="modal fade" id="editModal" tabindex="-1" role="dialog"aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content" ><div class="modal-header"><button type="button" class="close" data-dismiss="modal"aria-hidden="true">×</button><h4 class="modal-title" id="editModalLabel"></h4></div><div class="modal-body"><!-- form start --><form class="form-horizontal" id="saveadmin_form"name="form-horizontal"><input type="hidden" id="adminid" /><div class="box-body"><dl class="dl-horizontal"><div class="form-group"><div class="col-sm-10"><dt>管理員名</dt><dd><lable id="edit_show_adminname"></lable><input type="text" class="form-control" id="edit_adminName"name="edit_adminName" data-bv-notempty="true"name="edit_adminName"></dd></div></div><div class="form-group" id="div_password"><div class="col-sm-10"><dt>密碼</dt><dd><input type="text" class="form-control" name="edit_passwd"id="edit_passwd"></dd></div></div><div class="form-group" id="div_password1"><div class="col-sm-10"><dt>確認密碼</dt><dd><input type="text" class="form-control" name="edit_passwd1"id="edit_passwd1"></dd></div></div><div class="form-group"><div class="col-sm-10"><dt>顯示名</dt><dd><input type="text" name="edit_displayName"class="form-control" id="edit_displayName"></dd></div></div><div class="form-group"><div class="col-sm-10"><dt>郵箱</dt><dd><input type="text" data-bv-notempty="true" name="edit_Mail"class="form-control" id="edit_Mail"></dd></div></div><div class="form-group"><div class="col-sm-10"><dt>備注</dt><dd><textarea class="form-control" name="edit_desc" rows="3"id="edit_desc"></textarea></dd></div></div></dl></div><!-- /.box-body --><div class="modal-footer"><!-- <button type="button" onclick="saveAdmin()" class="btn btn-default">保存</button> --><button onclick="saveAdmin()" type="button" class="btn btn-success"><i class="fa fa-check"></i> 保存</button><button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> 關(guān)閉</button></div></form></div></div></div></div>

3.js代碼

//保存function saveAdmin(){//開啟驗證$('#saveadmin_form').data('bootstrapValidator').validate(); if(!$('#saveadmin_form').data('bootstrapValidator').isValid()){ return ; } //表單提交$.ajax({type: "POST",dataType : 'json',url: "<%=request.getContextPath()%>/user/saveUser.html?ma="+Math.random(),data: {"type" :"0","id":$("#adminid").val(),"account":$("#edit_adminName").val(),"display_name":$("#edit_displayName").val(),"password":$("#edit_passwd").val(),"mail":$("#edit_Mail").val(),"role":$("#edit_role").val(),"desc":$("#edit_desc").val()},success :function(json) {json = eval("("+json+")");$("#editModal").modal("hide");$("#dialog_content").html(json.message);$("#dialog_button_queren").hide();$("#dialog_modal").modal("show");t.ajax.reload( null, true );}});}//初始化表單驗證$(document).ready(function() {formValidator();});/*********************************校驗重置重點在這里 當modal隱藏時銷毀驗證再重新加載驗證****************************************/ //Modal驗證銷毀重構(gòu)$('#editModal').on('hidden.bs.modal', function() {$("#saveadmin_form").data('bootstrapValidator').destroy();$('#saveadmin_form').data('bootstrapValidator', null);formValidator();});//form驗證規(guī)則function formValidator(){$('#saveadmin_form').bootstrapValidator({message: 'This value is not valid',feedbackIcons: {valid: 'glyphicon glyphicon-ok',invalid: 'glyphicon glyphicon-remove',validating: 'glyphicon glyphicon-refresh'},fields: {//管理員名edit_adminName: {message: '管理員名驗證失敗',validators: {notEmpty: {message: '管理員名不能為空'},stringLength: {min: 5,max: 64,message: '管理員名長度必須在6到64位之間'}}},//密碼edit_passwd: {message: '密碼驗證失敗',validators: {notEmpty: {message: '密碼不能為空'},stringLength: {min: 5,max: 64,message: '密碼長度在5到64之間'}/* ,identical: {field: 'edit_passwd1',message: '兩次密碼不相同'} */}},//密碼確認edit_passwd1: {message: '密碼確認驗證失敗',validators: {notEmpty: {message: '密碼確認不能為空'},identical: {field: 'edit_passwd',message: '兩次密碼不相同'}}},//顯示名edit_displayName: {message: '用戶名驗證失敗',validators: {notEmpty: {message: '顯示名不能為空'},stringLength: {min: 5,max: 128,message: '顯示名長度必須在6到18位之間'}}},//郵箱edit_Mail: {validators: {notEmpty: {message: '郵箱不能為空'},emailAddress: {message: '郵箱格式正確'},stringLength: {max:256,message: '郵箱長度必須小于256'}}},//備注edit_desc: {message: '備注驗證失敗',validators: {stringLength: {max: 256,message: '備注長度長度必須小于256'}}},}});}