baigo 文档中心

jQuery 插件 - ginkgo

MD 文件下载

配置

配置为一个 JSON 对象，大致形式及说明如下：

var opts_validate = {
    rules: {
        // 验证规则
    },
    attr_names: {
        // 字段名定义
    },
    type_msg: {
        // 验证消息定义
    },
    format_msg: {
        // 格式消息定义
    },
    selector_types: {
        // 选择器类型
    }
    msg: {
        // 错误消息
    },
    box: {
        // 全局消息容器
    },
    field_selector: {
        // 字段相关选择器
    },
    class_name: {
        // 类名
    },
    result_obj: {
        // 服务器返回参数 3.0.2 起
    },
    extra: {
        // 额外消息容器
    },
    timeout: 30000, // ajax 验证超时
    delimiter: ' - ' // 规则定界符，用于替换规则中的逗号 ,
};

msg 错误消息

对象 定义 默认值
loading ajax 方式验证时正在验证的消息 Loading
ajax_err ajax 验证时服务器出错的消息 Error 
var opts_validate = {
    // ...
    msg: {
        loading: 'Loading',
        ajax_err: 'Error'
    },
    // ...
};

box 全局消息容器

此处定义的选择器、类名都可以和 tpl 对象的默认值相对应

对象 定义 默认值
tpl 容器模板
selector 相关选择器
class_name 容器的 css 类名 alert-danger
class_icon 图标的 css 类名 fas fa-exclamation-circle
msg 全局消息 Input error
delay 容器显示时间 5000

tpl 容器模板

请留意模板与 selector 对象的关联

<div class="alert alert-dismissible bg-content">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <span class="bg-icon"></span>
    <span class="bg-msg"></span>
</div>

selector 对象

对象 定义 默认值
box 容器选择器 .bg-validate-box
content 内容选择器 .bg-content
icon 图标选择器 .bg-icon
msg 消息选择器 .bg-msg 
var opts_validate = {
    // ...
    box: {
        selector: {
            box: '.bg-validate-box',
            content: '.bg-content',
            icon: '.bg-icon',
            msg: '.bg-msg'
        },
        class_name: 'alert-danger',
        class_icon: 'fas fa-exclamation-circle',
        msg: 'Input error',
        tpl: '<div class="alert alert-dismissible bg-content"><button type="button" class="close" data-dismiss="alert">&times;</button><span class="bg-icon"></span> <span class="bg-msg"></span></div>',
        delay: 5000
    },
    // ...
};

field_selector 字段相关选择器

此处定义与字段相关的选择器

对象 定义 默认值
prefix_msg 消息容器前缀 #msg_
prefix_group 表单组前缀 #group_ 
var opts_validate = {
    // ...
    field_selector: {
        prefix_msg: '#msg_',
        prefix_group: '#group_'
    },
    // ...
};

class_name 类名

此处定义与字段相关的选择器

对象 定义 默认值 备注
input 表单类名 success: 'is-valid', err: 'is-invalid'
msg 消息容器类名 success: 'valid-feedback', err: 'invalid-feedback', loading: 'text-info'
group 表单组类名 success: 'text-success', err: 'text-danger' 3.0.3 新增
attach 等效于 group 对象 即将弃用 
var opts_validate = {
    // ...
    class_name: {
        input: {
            success: 'is-valid',
            err: 'is-invalid'
        },
        msg: {
            success: 'valid-feedback',
            err: 'invalid-feedback',
            loading: 'text-info'
        },
        group: { // 3.0.2 及之前版本为 attach
            success: 'text-success',
            err: 'text-danger'
        }
    },
    // ...
};

result_obj 服务器返回参数

3.0.2 新增

此处定义服务器返回的参数名

对象 定义 默认值
error_msg 错误消息参数名 错误信息，当此对象未定义或为空时，则视为验证成功
msg 消息参数名 消息 
var opts_validate = {
    // ...
    result_obj: {
        error_msg: 'error_msg',
        msg: 'msg'
    },
    // ...
};

extra 额外消息容器

3.0.3 新增

此处定义的选择器、类名都可以和 tpl 对象的默认值相对应

对象 定义 默认值
tpl 容器模板
selector 相关选择器
class_name 容器的 css 类名 text-danger
class_icon 图标的 css 类名 fas fa-exclamation-circle
msg 全局消息 Input error
delay 容器显示时间 5000

tpl 容器模板

请留意模板与 selector 对象的关联

<span class="bg-content">
    <span class="bg-icon"></span>
    <span class="bg-msg"></span>
</span>

selector 对象

对象 定义 默认值
content 内容选择器 .bg-content
icon 图标选择器 .bg-icon
msg 消息选择器 .bg-msg 
var opts_validate = {
    // ...
    extra: {
        selector: {
            content: '.bg-content',
            icon: '.bg-icon',
            msg: '.bg-msg'
        },
        class_name: 'text-danger',
        class_icon: 'fas fa-exclamation-circle',
        msg: 'Input error',
        tpl: '<span class="bg-content"><span class="bg-icon"></span> <span class="bg-msg"></span></span>',
        delay: 5000
    },
    // ...
};
MD 文件下载
Top