ginkgo - baigo 文档中心

<div>
    <input type="checkbox" name="allow[add]" value="1" id="allow_add" data-validate="allow">
    <label for="allow_add">
        添加
    </label>
</div>
<div>
    <input type="checkbox" name="allow[edit]" value="1" id="allow_edit" data-validate="allow">
    <label for="allow_edit">
        编辑
    </label>
</div>
<div>
    <input type="checkbox" name="allow[delete]" value="1" id="allow_delete" data-validate="allow">
    <label for="allow_delete">
        删除
    </label>
</div>

通常情况下，插件会根据表单 id 或 name 属性去匹配验证规则。

上述例子由于表单类型是 checkbox，所以 id 是三个，而规则是一个，因此无法根据 id 匹配验证规则，这种情况下，插件会根据 name 属性去匹配规则，而恰好此例的 name 属性是一个数组，与 JSON 的命名规则不匹配，因此必须有一种替代方法来匹配规则。

我们需要分两步来解决：

请注意上述例子中的 data-validate 属性，此属性的值与验证规则相同
在配置对象中定义 selector_types 对象，如：

var opts_validate = {
    rules: {
        allow: {
            require: true
        }
    },
    selector_types: {
        allow: 'validate'
    }
};

selector_types 对象用来定义每一条规则所对应的表单选择器，以便插件能够获取表单的值。

采用 规则名: 选择器类型 的方式定义，选择器类型可能的值如下：

validate
name
class
id

额外消息

3.0.3 新增

在日常使用中，可能会遇到需要额外提示消息，这种情况通常出现在使用了 Tab 的表单中，下面是一个实例：

<form name="comp_form" id="comp_form" action="submit.php">
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a href="#basic" data-toggle="tab" class="nav-link active">基本</a>
        </li>
        <li class="nav-item">
            <a href="#location" data-toggle="tab" class="nav-link">位置</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="basic">
            <div>
                <label>名称</label>
                <input type="text" name="c_name" id="c_name">
                <small id="msg_c_name"></small>
            </div>
        </div>
        <div class="tab-pane" id="location">
            <div>
                <label>地址</label>
                <input type="text" name="c_addr" id="c_addr">
                <small id="msg_c_addr"></small>
            </div>
        </div>
    </div>
</form>

通常情况下，假如表单验证不通过的话，提示消息会出现在 id="msg_表单名" 这种形式的元素中。

上述例子由于 id="basic" 的 Tab 处于激活状态，而 id="location" 的 Tab 是无法看到的，而此时假设 id="c_addr" 的域无法通过验证，则提示消息会显示在 id="msg_c_addr" 的元素中，而这个元素由于 id="location" 的状态，也是无法看到的，此时用户就无从得知错误的具体情况，因此必须有一种替代方法来解决。

我们需要分两步来解决：

首先，在 class="nav-link" 的元素中添加一个用于显示额外消息的元素，即 id="extra_msg_Tab 名" 形式的表单

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a href="#basic" data-toggle="tab" class="nav-link active">
            基本
            <span id="extra_msg_base"></span>
        </a>
    </li>
    <li class="nav-item">
        <a href="#location" data-toggle="tab" class="nav-link">
            位置
            <span id="extra_msg_location"></span>
        </a>
    </li>
</ul>

在配置对象中定义 extra_boxes 对象，请注意与验证规则 rules 对应，如：

var opts_validate = {
    rules: {
        c_name: {
            require: true
        },
        c_addr: {
            require: true
        }
    },
    extra_boxes: {
        c_name: '#extra_msg_base',
        c_addr: '#extra_msg_location'
    }
};

extra_boxes 对象用来定义每一条规则所对应的额外消息元素，以便插件能够提供更丰富的错误提示。

采用 规则名: 额外消息 的方式定义，额外消息的类型可以是字符串，此时必须为消息元素的选择器，上述例子就是这种情况，也可以是一个对象，结构如下：

键名	描述
selector	选择器
msg	消息

上述例子也可以等效表达为：

var opts_validate = {
    rules: {
        c_name: {
            require: true
        },
        c_addr: {
            require: true
        }
    },
    extra_boxes: {
        c_name: {
            selector: '#extra_msg_base'
        },
        c_addr: {
            selector: '#extra_msg_location'
        }
    }
};

MD 文件下载

Top

jQuery 插件 - ginkgo

特殊情况

选择器类型

额外消息