BootstrapValidator实现注册校验和登录错误提示效果

BootstrapValidator是一款基于Bootstrap开发的表单验证插件。它提供了完整的客户端表单校验功能，包括表单提交前校验、实时校验等。通过BootstrapValidator，我们可以轻松实现注册校验和登录错误提示效果。下面将为大家介绍具体的实现方法。

步骤一：引入必要的文件和插件

首先，在HTML中引入BootstrapValidator插件和Bootstrap的相关样式文件。可以通过CDN引入，也可以下载到项目本地进行引入。

<!-- 引入相关CSS文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css">

<!-- 引入相关JS文件 -->
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>

步骤二：编写HTML代码

在HTML中添加表单代码，将需要验证的表单元素加上相应的name属性，并添加校验规则。

<form id="registerForm">
    <div class="form-group">
        <label for="username">用户名：</label>
        <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名" data-bv-notempty="true" data-bv-notempty-message="用户名不能为空">
    </div>
    <div class="form-group">
        <label for="password">密码：</label>
        <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" data-bv-notempty="true" data-bv-notempty-message="密码不能为空" data-bv-stringlength="true" data-bv-stringlength-min="6" data-bv-stringlength-message="密码长度不能少于6位">
    </div>
    <div class="form-group">
        <label for="confirm_password">确认密码：</label>
        <input type="password" class="form-control" id="confirm_password" name="confirm_password" placeholder="请再次输入密码" data-bv-notempty="true" data-bv-notempty-message="确认密码不能为空" data-bv-identical="true" data-bv-identical-field="password" data-bv-identical-message="两次输入的密码不相同">
    </div>
    <button type="submit" class="btn btn-default">注册</button>
</form>

步骤三：编写JavaScript代码

在JavaScript中添加校验代码，包括校验规则和错误提示信息。通过BootstrapValidator提供的API，我们可以轻松设置校验规则和错误提示信息。

$('#registerForm').bootstrapValidator({
    fields: {
        username: {
            validators: {
                notEmpty: {
                    message: '用户名不能为空'
                }
            }
        },
        password: {
            validators: {
                notEmpty: {
                    message: '密码不能为空'
                },
                stringLength: {
                    min: 6,
                    message: '密码长度不能少于6位'
                }
            }
        },
        confirm_password: {
            validators: {
                notEmpty: {
                    message: '确认密码不能为空'
                },
                identical: {
                    field: 'password',
                    message: '两次输入的密码不相同'
                }
            }
        }
    }
});

示例一：注册时实时校验

在上述代码基础上，我们可以实现实时校验效果。在fields中添加trigger为keyup的校验规则，这样当输入框内容发生变化时，会实时校验并显示错误信息。在校验成功后可以禁用按钮以防止重复提交。

$('#registerForm').bootstrapValidator({
    fields: {
        username: {
            // 校验规则
            validators: {
                notEmpty: {
                    message: '用户名不能为空'
                }
            },
            // 实时校验
            trigger: 'keyup'
        },
        password: {
            validators: {
                notEmpty: {
                    message: '密码不能为空'
                },
                stringLength: {
                    min: 6,
                    message: '密码长度不能少于6位'
                }
            },
            trigger: 'keyup'
        },
        confirm_password: {
            validators: {
                notEmpty: {
                    message: '确认密码不能为空'
                },
                identical: {
                    field: 'password',
                    message: '两次输入的密码不相同'
                }
            },
            trigger: 'keyup'
        }
    },
    // 校验成功后禁用提交按钮
    submitHandler: function(validator, form, submitButton) {
        $('#registerBtn').attr('disabled', true);
    }
});

示例二：登录时校验

在登录页面中，我们可以通过设置校验规则和错误提示信息来实现登录时校验效果。在校验成功后，可以跳转到相应的页面。

$('#loginForm').bootstrapValidator({
    fields: {
        username: {
            validators: {
                notEmpty: {
                    message: '用户名不能为空'
                }
            }
        },
        password: {
            validators: {
                notEmpty: {
                    message: '密码不能为空'
                }
            }
        }
    },
    submitHandler: function(validator, form, submitButton) {
        // 登录成功后跳转到相应的页面
        window.location.href = 'home.html';
    }
});

到这里，我们就可以完成BootstrapValidator实现注册校验和登录错误提示效果的完整攻略。通过这个插件，我们可以轻松实现表单验证，减少前端开发的工作量，提高工作效率。