BootstrapValidator超详细教程

最新推荐文章于 2022-03-07 14:39:12 发布

原创最新推荐文章于 2022-03-07 14:39:12 发布 · 3.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Bootstrap

bootstrap 专栏收录该内容

23 篇文章

订阅专栏

本文介绍如何利用Bootstrap Validator插件实现表单验证功能，包括引入必要的文件、编写HTML结构及JavaScript验证逻辑等步骤。

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

废话不多说，直接开始

一、引入必要文件

下载地址：(https://github.com/nghuuphuoc/bootstrapvalidator/archive/v0.4.5.zip)

<link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="/path/to/dist/css/bootstrapValidator.min.css"/>

<script type="text/javascript" src="/path/to/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/bootstrap/js/bootstrap.min.js"></script>
// 带众多常用默认验证规则的
<script type="text/javascript" src="/path/to/dist/js/bootstrapValidator-all.js"></script>
// 不带常用规则，需自定义规则
<script type="text/javascript" src="/path/to/dist/js/bootstrapValidator.min.js"></script>
//此方法是我编写常用的自定义规则的，也可直接写到对应的表单的js中
<script type="text/javascript" src="/path/to/dist/js/validator/atfmCustomValidatorRules.js"></script>

二、编写HTML


<div class="form-group">
    <label class="col-md-3 control-label" for="demo-text-input">机构名称</label>
    <div class="col-md-9">
        <input type="text"  name="sysOrg.name" class="form-control"  value="#(o?o.name:'')">
        <small class="help-block">请输入机构名称</small>
    </div>
</div>
<div class="form-group">
    <label class="col-md-3 control-label" for="demo-textarea-input">描述信息</label>
    <div class="col-md-9">
        <textarea name="sysOrg.description" rows="9" class="form-control">#(o?o.description:'')</textarea>
        <small class="help-block">请输入机构的描述信息</small>
    </div>
</div>
<div class="form-group">
    <label class="col-md-3 control-label" for="demo-text-input">显示顺序</label>
    <div class="col-md-4">
        <input type="text" name="sysOrg.sort" class="form-control" value="#(o?o.sort:'')">
        <small class="help-block">请输入机构显示顺序</small>
    </div>
</div>

三、表单提交，验证处理

$(document).ready(function() {
                $('#editForm').bootstrapValidator({
                    fields: {
                        "sysOrg.name": {
                            validators: {
                                notEmpty: {
                                    message: '*机构名称不能为空'
                                },
                                stringLength: {/*长度提示*/
                                    max: 25,
                                    message: '*机构名称长度必须小于25'
                                }
                            }
                        },
                        "sysOrg.sort": {
                            validators: {
                                lessThan: {
                                    inclusive:true,
                                    value: 20,
                                    message: '*请输入小于20的数字'
                                }
                            }
                        },
                        "sysOrg.description": {
                            validators: {
                                stringLength: {
                                    max: 2000,
                                    message: '*机构描述信息长度必须小于2000'
                                }
                            }
                        }
                    }
                }).on("success.form.bv", function (e) {
                    save();
                    return false;//阻止表单跳转
                });
        });