selectpicker 上的不显眼验证 - Javascript

在使用 selectpicker 插件时，我们一般会使用客户端的验证，例如 jQuery Validation 等插件，但是如果在 selectpicker 上加上验证提示会非常不美观。这时，我们可以使用一种不显眼的验证方式，来保证验证的准确性。

该方法的核心思路就是，在 selectpicker 上添加一个隐藏的 input 元素，利用该元素进行验证，然后再将该元素的值赋值给 selectpicker 真正的 input 元素，从而完成验证过程。

1. HTML 结构

首先，我们需要在 selectpicker 上添加一个隐藏的 input 元素，用于验证：

<select class="selectpicker" name="mySelect">
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>

<input type="hidden" name="mySelect_hidden" data-validation="required" data-validation-error-msg="Please select an option." />

注意，上面的隐藏 input 元素需要添加 data-validation 和 data-validation-error-msg 属性，用于进行验证和显示错误信息。

2. Javascript 代码

接下来，我们就需要编写 Javascript 代码，来完成验证和赋值的过程：

$('select').on('change', function() {
  // 获取隐藏 input 元素
  var $hiddenInput = $(this).siblings('[name="'+$(this).attr('name')+'_hidden"]');

  // 验证隐藏 input 元素是否合法
  if ($hiddenInput.valid()) {
    // 将隐藏 input 元素的值赋值给真正的 input 元素
    $(this).val($hiddenInput.val());
  }
});

// 初始化验证插件
$.validate({
  ignore: ':hidden:not([data-validation])'
});

上述代码中，我们绑定了 select 元素的 change 事件，当 select 元素的值改变时，我们就获取对应的隐藏 input 元素并进行验证，如果验证通过，则将隐藏 input 元素的值赋值给真正的 input 元素从而完成验证。

同时，我们也需要初始化验证插件，这里使用了 jQuery Validation 插件，最后需要注意的是，我们仅对有 data-validation 属性的隐藏 input 元素进行验证（即忽略没有设置验证规则的隐藏 input 元素）。

3. 效果展示

最终效果如下图所示，在选择无效选项时，错误提示不会干扰 selectpicker 的布局，同时也保证了正确性。

到此为止，我们就完成了 selectpicker 上的不显眼验证。