实用又漂亮的BootstrapValidator表单验证插件

下面我将为大家详细讲解“实用又漂亮的BootstrapValidator表单验证插件”的完整攻略。

BootstrapValidator介绍

BootstrapValidator是一款基于jQuery和Bootstrap框架的表单验证插件，它不光提供了常规的表单验证，还可以执行异步验证，支持前端和后端验证，支持多语言等功能。

BootstrapValidator使用方法

步骤一：引入库文件

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>

步骤二：初始化插件

$(document).ready(function() {
    $('#form1').bootstrapValidator({
        // 验证规则
        fields: {
            username: {
                validators: {
                    notEmpty: {
                        message: '用户名不能为空'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: '密码不能为空'
                    },
                    stringLength: {
                        min: 6,
                        max: 18,
                        message: '密码长度必须在6到18之间'
                    }
                }
            }
        }
    });
});

步骤三：编写表单

<form id="form1" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-3 control-label">用户名：</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" name="username">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">密码：</label>
        <div class="col-sm-6">
            <input type="password" class="form-control" name="password">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-3 col-sm-6">
            <button type="submit" class="btn btn-default">提交</button>
        </div>
    </div>
</form>

示例说明

示例一：前端表单验证

为了在前端完成表单验证，你需要在你的表单元素上添加data-bv-*属性来定义验证规则：

<input type="text" class="form-control" name="username" 
    data-bv-notempty="true"
    data-bv-notempty-message="用户名不能为空">

如果验证不通过，BootstrapValidator会在后面添加提示信息：

<small class="help-block" data-bv-for="username" data-bv-result="INVALID">
    用户名不能为空
</small>

示例二：异步验证

有时候，你可能需要验证的数据不能通过前端验证。比如用户名的唯一性，这个需要通过后台查询数据库才能做到验证。以下是一个示例：

$('#form2').bootstrapValidator({
    fields: {
        username: {
            validators: {
                remote: {
                    url: '/check-username',
                    message: '该用户名已经存在',
                    type: 'POST'
                }
            }
        }
    }
});

这个验证器通过异步的方式向后台发送查询请求，并根据返回结果来决定数据是否有效。

以上就是“实用又漂亮的BootstrapValidator表单验证插件”的完整攻略。希望对你有所帮助。