Bootstrap验证

<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
            <div class="modal-dialog">
                <form id="addBookCode">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                            <h1 class="modal-title" id="myModalLabel"><span>场景信息配置</span></h1>
                        </div>
                        <div class="modal-body">
                            <div class="form-group col-xs-12">
                                <div class="col-xs-4 text-right">
                                    <label class="label_contorl text-right" for="txt_SenarioName_">情景名称:</label>
                                </div>
                                <div class="col-xs-7">
                                    <input name="txt_SenarioName_" id="txt_SenarioName_" class="form-control" value="" />
                                </div>
                                <label class="label_contorl text-left message">*</label>
                            </div>
                            <div class="form-group col-xs-12">
                                <div class="col-xs-4 text-right">
                                    <label class="label_contorl text-right" for="txt_YieldRateCurve_">收益率曲线:</label>
                                </div>
                                <div class="col-xs-7">
                                    <asp:DropDownList ID="txt_YieldRateCurve_" name="txt_YieldRateCurve_" runat="server" CssClass="form-control datacontrol drop_combo"></asp:DropDownList>
                                </div>
                                <label class="label_contorl text-left message">*</label>
                            </div>
                            <div class="form-group col-xs-12">
                                <div class="col-xs-4 text-right">
                                    <label class="label_contorl text-right" for="txt_SearchCloseDate_">曲线日期:</label>
                                </div>
                                <div class="col-xs-7">
                                    <asp:DropDownList ID="txt_SearchCloseDate_" name="txt_SearchCloseDate_" onclick="WdatePicker()" Format="{0:yyyy-MM-dd}" runat="server" CssClass="form-control datacontrol drop_combo"></asp:DropDownList>
                                </div>
                                <label class="label_contorl text-left message">*</label>
                            </div>
                            <div class="form-group col-xs-12">
                                <div class="col-xs-4 text-right">
                                    <label class="label_contorl text-right" for="txt_Currency_">货币:</label>
                                </div>
                                <div class="col-xs-7">
                                    <asp:DropDownList ID="txt_Currency_" name="txt_Currency_" runat="server" CssClass=" datacontrol form-control"></asp:DropDownList>
                                </div>
                                <label class="label_contorl text-left message">*</label>
                            </div>
                            <div class="form-group col-xs-12">
                                <div class="col-xs-4 text-right">
                                    <label class="label_contorl text-right" for="txt_EndUser_">使用单位:</label>
                                </div>
                                <div class="col-xs-7">
                                    <asp:DropDownList ID="txt_EndUser_" name="txt_EndUser_" runat="server" CssClass=" datacontrol form-control"></asp:DropDownList>
                                </div>
                                <label class="label_contorl text-left message">*</label>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary btn-sm" id="btn_save1">确认</button>
                            <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        //添加新增验证规则
        $('#myModal').bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                txt_SenarioName_: {
                    validators: {
                        notEmpty: {
                            message: '不能为空'
                        }
                    }
                },
                txt_YieldRateCurve_: {
                    validators: {
                        notEmpty: {
                            message: '不能为空'
                        }
                    }
                },
                txt_SearchCloseDate_: {
                    validators: {
                        notEmpty: {
                            message: '不能为空'
                        }
                    }
                },
                txt_Currency_: {
                    validators: {
                        notEmpty: {
                            message: '不能为空'
                        }
                    }
                },
                txt_EndUser_: {
                    validators: {
                        notEmpty: {
                            message: '不能为空'
                        }
                    }
                }
            }
        });


   $('#myModal').on('hide.bs.modal', function (e) {
            $("#myModal").data('bootstrapValidator').resetForm()
        })


  function ModelValidate() {

            var bootstrapValidator = $("#myModal").data('bootstrapValidator');
            //手动触发验证
            $("#myModal").data('bootstrapValidator').validate()
            if (bootstrapValidator.isValid()) {
                console.log("tj")
                //表单提交的方法、比如ajax提交
                $('#myModal').modal('hide')

            }
            else {
                return false;
            }
        }

 

posted on 2017-11-29 10:33  听哥哥的话  阅读(259)  评论(0编辑  收藏  举报

导航