jQuery plugins


配置

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

var opts_validate = {
    rules: {
        // 验证规则
    },
    attr_names: {
        // 字段名定义
    },
    type_msg: {
        // 验证消息定义
    },
    format_msg: {
        // 格式消息定义
    },
    selector_types: {
        // 选择器类型
    }
    msg: {
        // 错误消息
    },
    box: {
        // 全局消息容器
    },
    field_selector: {
        // 字段相关选择器
    },
    class_name: {
        // 类名
    },
    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-times-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-times-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'
attach 附加类名 success: 'text-success', err: 'text-danger'
var opts_validate = {
    // ...
    class_name: {
        input: {
            success: 'is-valid',
            err: 'is-invalid'
        },
        msg: {
            success: 'valid-feedback',
            err: 'invalid-feedback',
            loading: 'text-info'
        },
        attach: {
            success: 'text-success',
            err: 'text-danger'
        }
    },
    // ...
};