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>

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>

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