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> 关闭</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验证销毁重构$('#editModal').on('hidden.bs.modal', function() {$("#saveadmin_form").data('bootstrapValidator').destroy();$('#saveadmin_form').data('bootstrapValidator', null);formValidator();});//form验证规则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之间'}}},//密码确认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'}}},}});}

以上所述是小编给大家介绍的Bootstrapvalidator校验、校验清除重置的实现代码(推荐)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！