使用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));