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

Bootstrap驗證控制項的使用