zoukankan      html  css  js  c++  java
  • Bootstrap验证控件的使用

    前端HTML代码

    <form id="myForm" method="post" class="form-horizontal" action="/Task/Test">
                        <div class="modal-body">
    
                          
                            <div class="form-group">
                                <label class="col-lg-3 control-label">任务名称</label>
                                <div class="col-lg-5">
                                    <input type="text" class="form-control" name="takeName" id="takeName" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-3 control-label">程序集名称</label>
                                <div class="col-lg-5">
                                    <input type="text" class="form-control" name="dllName" id="dllName" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-3 control-label">类名称</label>
                                <div class="col-lg-5">
                                    <input type="text" class="form-control" name="methodName" id="methodName" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-3 control-label">cron表达</label>
                                <div class="col-lg-5">
                                    <input type="text" class="form-control" name="cron" id="cron" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-3 control-label">表达式说明</label>
                                <div class="col-lg-5">
                                    <input type="text" class="form-control" name="cronRemark" id="cronRemark" />
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-lg-4 col-sm-4 col-xs-4">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" class="colored-success" checked="checked" id="enabled">
                                            <span class="text">启用</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default"
                                    data-dismiss="modal">
                                关闭
                            </button>
                            <button type="submit" class="btn btn-primary"> 提交</button>
                        </div>
                    </form>
    View Code

    JS

    <script>
            $(document).ready(function () {
                $("#myForm").bootstrapValidator({
                    message: 'This value is not valid',
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        takeName: {
                            validators: {
                                notEmpty: {
                                    message: '任务名称不能为空'
                                }
                            }
                        },
                        dllName: {
                            validators: {
                                notEmpty: {
                                    message: '程序集名称不能为空'
                                },
                                //remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值,获得一个json数据。例表示正确:{"valid",true}  
                                //    url: '/Task/Test3',//验证地址
                                //    message: '用户已存在',//提示消息
                                //    delay :3000,
                                //    type: 'POST',//请求方式
                                    
                                //    /**自定义提交数据,默认值提交当前input value
                                //     *  data: function(validator) {
                                //          return {
                                //              password: $('[name="passwordNameAttributeInYourForm"]').val(),
                                //              whatever: $('[name="whateverNameAttributeInYourForm"]').val()
                                //          };
                                //       }
                                //     */
                                //},
    
                            }
                        },
                        methodName: {
                            validators: {
                                notEmpty: {
                                    message: '类名称不能为空'
                                }
                            }
                        },
                        cron: {
                            validators: {
                                notEmpty: {
                                    message: 'cron表达不能为空'
                                }
                            }
                        }
                    },
                    submitHandler: function (validator, form, submitButton) {
                        var taskData = {};
                        taskData.taskName = $('#takeName').val();
                        taskData.dllPath = $('#dllName').val();
                        taskData.methodName = $('#methodName').val();
                        taskData.cronExpression = $('#cron').val();
                        taskData.remark = $('#cronRemark').val();
                        taskData.enabled = $('#enabled').is(':checked');
                        $.ajax({
                            type: "post",
                            url: "/Task/AddTask",
                            data:taskData,
                            success: function (data) {
                                alert(data);
                                $('#myForm').data('bootstrapValidator').resetForm(true);
                            }
                        });
                    }
                })
    
            })
        </script>
    View Code

    该方式为AJAX提交,提交事件写在submitHandler

  • 相关阅读:
    js 将u003C这一类东西转换为标签
    git使用
    js_03 面向对象
    初级算法 数组
    python 用execjs执行js代码
    js_02 函数
    递归
    01 .linux常用命令
    08. 脱缰的野马 crawlspider
    SPACES:“抽取-生成”式长文本摘要(法研杯总结)
  • 原文地址:https://www.cnblogs.com/Nomads/p/5462606.html
Copyright © 2011-2022 走看看