使用bootstrap-Validator校验表单

最新推荐文章于 2022-10-11 09:31:25 发布

转载最新推荐文章于 2022-10-11 09:31:25 发布 · 165 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/634650

文章标签：

#ui #前端 #javascript #ViewUI

本文介绍如何使用Bootstrap Validator进行表单验证。通过引入必要的文件并设置表单元素的属性，实现对不同类型的表单项进行有效性检查。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端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));