zoukankan      html  css  js  c++  java
  • 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;
                }
            }
  • 相关阅读:
    Log4Net二次封装
    jquery动态生成二维码添加自定义logo
    小程序map地图多点定位
    vue上传阿里云图片组件
    vue移动端地址三级联动组件(二)
    vue移动端地址三级联动组件(一)
    vue自定义轻量级form表单校验
    js中间件
    事件模型
    通过JS唤醒app(安卓+ios)
  • 原文地址:https://www.cnblogs.com/kexb/p/7918949.html
Copyright © 2011-2022 走看看