bootstrapvalidator校验、校验清除重置

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之间'
                        }/* ,
                        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'
                        }
                    }
                },
            }
        });
    }