使用bootstrap-Validator校驗表單

前端UI架構選擇bootstrap，那麼bootstrap-Validator作為表單校驗是一個不錯的選擇。

以下内容前提是UI架構采用bootstrap。

引入依賴

第一個：校驗控件

第二行：語言包，預設是英語

第三行：擴充包，用來自定義

<script src="/plugins/bootstrapvalidator/js/bootstrapValidator.js"></script>
    <script src="/plugins/bootstrapvalidator/js/language/zh_CN.js"></script>

    <script src="/plugins/bootstrapvalidator/js/bootstrapValidator.extends.js"></script>
           

編寫form表單

data-bv-｛校驗規則｝,規則可以自定義，參考bootstrapValidator.extends.js。

注意送出按鈕是submit類型。

<form class="form-horizontal" id="form" action="xxx">
        <div class="form-group">
            <label for="workTypName" class="col-sm-2 control-label" >*名稱：</label>
            <div class="col-sm-4" >
                <input type="" name="workTypName" class="form-control" id="workTypName" placeholder=""
                       data-bv-notEmpty="true"
                       data-bv-username="true"
                       data-bv-stringlength="true"
                       data-bv-stringlength-min="6"
                       data-bv-stringlength-max="30">
            </div>
        </div>
        <div class="form-group">
            <label for="category" class="col-sm-2 control-label">*愛好：</label>
            <div class="col-sm-4">
                <label class="checkbox-inline">
                    <input type="checkbox" id="inlineCheckbox1" value="option1"> 籃球
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" id="inlineCheckbox2" value="option2"> 足球
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" id="inlineCheckbox3" value="option3"> 乒乓球
                </label>
            </div>
            <label for="category" class="col-sm-2 control-label">*性别：</label>
            <div class="col-sm-4">
                <label class="radio-inline">
                    <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 男
                </label>
                <label class="radio-inline">
                    <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 女
                </label>
            </div>
        </div><div class="form-group">
            <label for="category" class="col-sm-2 control-label">*下拉框：</label>
            <div class="col-sm-8">
                <select class="form-control" id="category" name="category">
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="sortNo" class="col-sm-2 control-label">*排序：</label>
            <div class="col-sm-8" >
                <div class="input-group">
                    <select class="form-control" id="sortNo" name="sortNo">
                    </select>
                    <span class="input-group-addon" id="basic-addon2">之後</span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="inputGroup" class="col-sm-2 control-label">*輸入框組：</label>
            <div class="col-sm-8" >
                <div class="input-group">
                    <input type="" name="inputGroup" class="form-control" id="inputGroup" placeholder="" required>
                    <span class="input-group-addon" id="xxx">機關（元）</span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="memo" class="col-sm-2 control-label">備注：</label>
            <div class="col-sm-8" id="memo" name="memo">
                <textarea class="form-control" rows="3"></textarea>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-6">
                <button type="submit" class="btn btn-primary  ">儲存</button>
                <button type="button" class="btn btn-default " id="closeBtn">取消</button>
            </div>
        </div>
    </form>
           

送出表單

$('#form').bootstrapValidator().on('success.form.bv',function (data) {
          //TODO 送出成功後的業務
   });
           

效果圖

校驗效果

擴充

擴充一個username校驗規則，長度6-20字元。

(function($) {
    $.fn.bootstrapValidator.i18n.username = $.extend($.fn.bootstrapValidator.i18n.username || {}, {
        'default': '請輸入有效使用者名'
    });
    $.fn.bootstrapValidator.validators.username = {
        validate: function(validator, $field, options) {
           var _v =$field.val();
           if(_v.length < 6 || _v.length >20){
               return false;
           }
            return true;
        }
    };
}(window.jQuery));