基于bootstrap 样式的 jquery 校验插件 Bootstrapvalidator

bootstrapvalidator 简单实例

$(function () {
    /* 初始化校验插件bootstrapValidator */
    /* 条件1 必须是form表单结构, 并且有一个提交按钮 */
    /* 条件2 该插件是jq编写的, 样式和bootStrap一致, 需要jquery和bootStrap配合使用  */
    $('#login').bootstrapValidator({
        /* 配置校验的不同状态下显示的图标 */
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        /* 需要校验的表单元素, 通过 name 甄别 */
        fields: {
            /* 对应表单元素的 name 值 */
            username: {
                /* 校验规则 多个校验规则*/
                validators: {
                    /* 校验规则对应提示信息 */
                    notEmpty: {
                        message: "用户名不能为空"
                    },
                    /* 配置一个校验规则, 用于ajax请求后修改校验信息 */
                    callback: {
                        message: "用户名不存在"
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: "请输入密码"
                    },
                    stringLength: {
                        min: 6,
                        max: 18,
                        message: "密码必须是6-18个字符"
                    },
                    callback: {
                        message: "密码错误"
                    }
                }
            }
        }
    }).on('success.form.bv', function (e) {
        /* 校验成功的时候触发 */
        /* 阻止表单的提交默认事件, 使用ajax提交 */
        e.preventDefault();
        /* 后台校验用户名和密码 */
        let $form = $(e.target);
        $.ajax({
            type: 'post',
            url: 'data.json',
            data: $form.serialize(),
            dataType: 'json',
            success(data) {
                console.log(data);
                /* 根据回调的参数判断业务是否成功 */
                /* 业务成功 -> 跳转页面 */
                if (data.login.success.status == 2001) {
                    location.href = '/admin/index.html';
                }
                /* 业务失败 */
                else {
                    /* 根据错误信息,继续进行校验的更改 */
                    if (data.login.error[0].status == 1001) {
                        /* 用户名错误 */
                        /* 设置用户名这个表单元素的校验状态为校验失败 */
                        /* NOT_VALIDATED 未校验, CALIDATING 校验中, INVALID 失败, VALID 成功 */
                        /* 1. 获取校验组件 */
                        /* 2. 校验更改状态函数 */
                        /* 3. 参数: 校验表单, 改成什么状态, 使用哪个校验规则    */
                        $form.data('bootstrapValidator').updateStatus('username','INVALID','callback');
                    } else {
                        /* 密码错误 */
                        $form.data('bootstrapValidator').updateStatus('password', 'INVALID', 'callback');
                    }
                }
            }
        })
    })
});