Bootstrap Validator使用整理

Bootstrap Validator使用整理

  •  2019 年 4 月 25 日
  •  1057
  •  Bootstrap Validator 

表单校验工具Bootstrap Validator使用整理。本文章既不详细,又不规范,仅供参考。 :doge

初始化

// 初始化
$('#form').bootstrapValidator({
    message: '请完善表单',
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        username: {
            validators: {
                notEmpty: {
                    message: "用户名不能为空"
                },
                stringLength: {
                    min: 8,
                    max: 20,
                    message: '......'
                }
            }
        }
    }
});

动态添加删除及触发校验规则

// 添加校验规则
$("#form").bootstrapValidator("addField", "username", {
    validators: {
        notEmpty: {
            message: '用户名不能为空'
        }
    }
});

// 删除单个字段校验规则
$("#form").bootstrapValidator('removeField','username');

// 删除全部字段校验规则
$("#form").data('bootstrapValidator').destroy();

// 主动校验单个字段
$("#subjectForm").data('bootstrapValidator').validateField('clearRemark');

// 主动校验全部字段
$("#paperForm").data("bootstrapValidator").validate();

常用校验规则

// 判断字段是否为空
notEmpty: {
    message: '用户名不能为空'
}

// 判断字段长度
stringLength: {
    min: 8,
    max: 20,
    message: '长度不能小于8位或超过20位'
}

// 通过正则表达式进行验证
regexp: {
    regexp: /^[A-Z\s]+$/i,
    message: '只能由字母字符和空格组成'
}

// 大小写验证
stringCase: {
    case: 'upper',
    message: '只能填写大写字符'
}

// Email验证
emailAddress: {
    message: '邮箱格式错误'
}

// 日期格式验证
date: {
    format: 'YYYY/MM/DD',
    message: '日期格式错误'
}

// 纯数字验证
digits: {
    message: '只能包含数字'
}

// 复选框验证
choice: {
    min: 2,
    max: 4,
    message: '请选择2-4项'
}

// 两个字段相同的判断
identical: {
    field: 'confirmPassword',
    message: '两次输入密码不一致'
}

// 两个字段不相同的判断
different: {
    field: 'password',
    message: '不能相同'
}

// 数值大于10
greaterThan: {
    value: 10
}

// 数值小于10
lessThan: {
    value: 10
}

// Ajax验证。服务端返回结构:{"valid",true or false}
remote: {
    message: '用户已存在',
    delay: 2000,
    type: 'get',
    url: 'your url',
    data: function (validator) {
        return {
            username: $('#username').val()
        };
    }
}

其它

https://stackoverflow.com/questions/40591361/revalidate-field-using-bootstrapvalidator

https://stackoverflow.com/questions/26670478/bootstrap-validator-resetform


扫一扫分享到微信

已有 条评论
写评论