jQuery 插件 - ginkgo


特殊情况

在日常使用中,可能会遇到一些特殊情况,此处提供一些解决实例。


选择器类型

在日常使用中,可能会遇到表单 id、name 无法与验证规则匹配,这种情况通常出现在需要输入数组的表单中,下面是一个实例:

<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>

通常情况下,插件会根据表单 idname 属性去匹配验证规则。

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

我们需要分两步来解决:

  1. 请注意上述例子中的 data-validate 属性,此属性的值与验证规则相同
  2. 在配置对象中定义 selector_types 对象,如:
var opts_validate = {
  rules: {
    allow: {
      require: true
    }
  },
  selector_types: {
    allow: 'validate'
  }
};

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

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

  1. validate
  2. name
  3. class
  4. 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" 的状态,也是无法看到的,此时用户就无从得知错误的具体情况,因此必须有一种替代方法来解决。

我们需要分两步来解决:

  1. 首先,在 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>
    
  2. 在配置对象中定义 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'
    }
  }
};

更新时间 04-28 15:28
Top