bootstrapvalidator实现校验 校验清除重置

               

问题:经常开发中用到modal对话框弹出验证以后第二次弹框时上次的验证效果依然有效,那就要想办法第二次弹框之前去掉上次的验证;

解决办法:

1.引入bootstrap的validator的校验js和css;

<linkrel="stylesheet"

href="<%=realPath%>/bootstrap/css/bootstrapValidator.css"/>

<scripttype="text/javascript"

src="<%=realPath%>/bootstrap/js/bootstrapValidator.js"></script>

2.body中定义的弹框modal

<body>

<!-- 弹框 -->

<divclass="modal fade"id="addDepModal"tabindex="-1"role="dialog"aria-labelledby="adddepLabel">

<divclass="modal-dialog"role="document">

<divclass="modal-content">

<divclass="modal-header">

<buttontype="button"class="close"data-dismiss="modal"aria-label="Close"><spanaria-hidden="true">&times;</span></button>

<h4class="text-center"style="font-size:16px;font-weight:bold;">添加部门</h4>

</div>

<formid="addDepForm"method="post">

<inputtype="hidden"id="bizDepId"name="bizDepId"/>

<inputtype="hidden"id="orgId"name="orgId"/>

<divclass="modal-body">

<divclass="form-group">

<label>部门名称:</label>

<inputtype="text"class="form-control"name="dep_name"id="dep_name"placeholder="请请输入部门名称"/>

</div>

</div>

</form>

<divclass="modal-footer">

                 <buttontype="button"id="addDepBtn"class="btn btn-primary">确定</button>

                 <buttontype="button"class="btn btn-default"data-dismiss="modal">取消</button>

</div>

</div>

</div>

<!--/添加弹框-->

</div>


</body>

3.通常情况下默认会在初始化中默认加载bootstrapvalidator验证代码

$(function(){bootstrapvalidator验证代码});


解决二次校验问题方法

1.定义bootstrap validator校验方法(校验部门名称是否重复)

//form验证规则

    function formValidator(){

    $("#addDepForm").bootstrapValidator({

message: '无效的值',

feedbackIcons: {

                /* valid: 'glyphicon glyphicon-ok',

                invalid: 'glyphicon glyphicon-remove', */

                validating:'glyphicon glyphicon-refresh'

               },

            fields:{

            dep_name: {

                    validators: {

                        notEmpty: {

                            message: '部门名不能为空'

                        },

                        remote: {

                            type: "post",

                              url: '<%=realPath%>/dep/validateBepExist',

                              data: function (validator) {

                                  return {

                                      name: validator.getFieldElements('dep_name').val(),

                                      id:validator.getFieldElements('bizDepId').val()

                                  };

                              },

                              message: '当前部门已被创建,请修改部门名称!',

                              delay: 300

                        }

                    }

                }

            }          

});

}

2. 在js默认启动时调用启动校验

$( function (){formValidator();});

3.在modal隐藏时移除校验重新添加校验

$("#addDepModal").on('hidden.bs.modal',function(e){

//移除上次的校验配置

$("#addDepForm").data('bootstrapValidator').destroy();

$('#addDepForm').data('bootstrapValidator',null);

//重新添加校验

formValidator();

});









           

再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

猜你喜欢

转载自blog.csdn.net/qq_43746825/article/details/86304054