Selectize.js 创建：验证 CREATE 输入答案

【问题标题】：Selectize.js Create: validate CREATE inputSelectize.js 创建：验证 CREATE 输入
【发布时间】：2019-09-30 02:15:15
【问题描述】：

这是我的 selectize.js 函数

$("#addmobilenumbers").selectize({
    inputClass: 'form-control selectize-input', 
    dropdownParent: "body",persist: false,
    create: true //need to create and allow only digits
});

我只想要numeric（仅输入手机号码）在此处输入create 和min/max length。我该怎么做？

【问题讨论】：

除非问题是关于 jQuery Validate 插件的，否则不要使用 jQuery Validate 标签。编辑标签。

标签： jquery validation selectize.js

【解决方案1】：

使用createFilter 和onInitialize 选项

createFilter：使用给定的正则表达式在创建之前验证选项

/^[0-9]{10}$/ - accepts only numbers between 0-9 of length 10 digits

onInitialize：用于设置最大长度/限制输入为数字的事件

this.$control_input.prop('maxlength', 10) 

this.$control_input.on('input', function() {
  this.value = this.value.replace(/[^\d]/g, '')
})

$("#addmobilenumbers").selectize({
  inputClass: 'form-control selectize-input',
  dropdownParent: "body",
  persist: false,
  create: true,
  createFilter: /^[0-9]{10}$/,
  onInitialize: function() {
    this.$control_input.prop('maxlength', 10)

    this.$control_input.on('input', function() {
      this.value = this.value.replace(/[^\d]/g, '')
    })
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.min.js" integrity="sha512-pF+DNRwavWMukUv/LyzDyDMn8U2uvqYQdJN0Zvilr6DDo/56xPDZdDoyPDYZRSL4aOKO/FGKXTpzDyQJ8je8Qw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.default.min.css" integrity="sha512-H955AcCOE/fUjX4XWkN0FwjCYVV/zioSF6VpUKCcrGdR1Wa8paFWYixWYp85npbnx3i1kZCH4Rm4TRxut2+d5A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<select id="addmobilenumbers" multiple></select>

参考文献

https://selectize.dev/docs.html#configuration

【讨论】：

【解决方案2】：

您可以在 create 函数中检查该条件。只需使用$.isNumeric(input) 检查该值是否为数字，并添加您的最小/最大长度，如果此条件满足则创建您的新选项，否则使用return false; 来防止任何默认操作。

演示代码：

$("#addmobilenumbers").selectize({
  inputClass: 'form-control selectize-input',
  dropdownParent: "body",
  persist: false,
  plugins: ['remove_button'],
  create: function(input) {
    console.log($.isNumeric(input), input.length)
    //check if no is numeric ,,and min/max length
    if ($.isNumeric(input) && (input.length > 2 && input.length < 6)) {
      return {
        value: input,
        text: input
      } //create that tags...
    } else {
      console.log("can't add")
      return false; //prevnt default...
    }
  }
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/js/standalone/selectize.min.js"></script>
<input type="text" id="addmobilenumbers">

【讨论】：