Vue / Vuetify - 如何对每个芯片项而不是整个选择输入进行验证

Posted

技术标签:

【中文标题】Vue / Vuetify - 如何对每个芯片项而不是整个选择输入进行验证【英文标题】:Vue / Vuetify - How to make a validation on each chip item instead of the entire select input 【发布时间】:2018-11-04 07:16:26 【问题描述】:

有谁知道如何对每个芯片项进行验证(使用 vee-validate)?

我有这段代码:

<v-select
  class="elevation-0 mt-border-bottom"
  v-model="PhoneNumber"
  label="Add phone number"
  chips
  tags
  solo
  prepend-icon="phone"
  clearable
  :error-messages="errors.collect('Phone Number')"
  v-validate="'required|numeric'"
  data-vv-name="Phone Number"
  required
>
    <template slot="selection" slot-scope="data">
        <v-chip
          close
          outline
          dark
          @input="remove(data.item)"
          :selected="data.selected"
        >
            <strong> data.item </strong>
        </v-chip>
    </template>
</v-select>

<script>
    export default 
        data () 
            return 
                PhoneNumber: []
            
        ,
        methods: 
            async submitNewNumber () 
                await this.$validator.validateAll().then((isValid) => 
                    if (isValid) 
                        console.log('submitted')
                     else 
                        return false
                    
                )
            
        
    
</script>

现在验证仅在整个电话号码输入上进行。 我想知道如何让它在每个芯片上工作,在这个输入中将 min_value 设置为 9 并将 max_value 设置为 15。

Vuetify - 芯片使用情况:https://vuetifyjs.com/en/components/chips

Vuetify - Vee 验证:https://vuetifyjs.com/en/components/forms#example-vee-validate

Vee-validate - 验证规则:https://baianat.github.io/vee-validate/guide/rules.html

谢谢

【问题讨论】:

【参考方案1】:

v-chip 似乎没有内置验证功能。所以我使用默认验证(不是 vee-validate)。这样就可以看到 v-select 的结果了。然后,您可以遍历结果并验证每个值。

        inputRules = [
            (v: any) => 
                if (!v || v.length < 1)
                    return 'Input is required';
                else if (v.length > 0) 
                for (let i = 0; i < v.length; i++) 
                    if (v[i].length > 9)
                        return 'Invalid Number';
                
            
                else return true;
            
        ];

<v-form ref="form" v-model="valid" lazy-validation>
        <v-select
            class="elevation-0 mt-border-bottom"
            v-model="phoneNumber"
            label="Add phone number"
            chips
            tags
            solo
            prepend-icon="phone"
            clearable
            data-vv-name="Phone Number"
            required
            :rules="inputRules"
        >
            <template slot="selection" slot-scope="data">
                <v-chip
                    close
                    outline
                    dark
                    @input="remove(data.item)"
                    :selected="data.selected"
                >
                    <strong> data.item </strong>
                </v-chip>
            </template>
        </v-select>
        <v-btn @click.native="submitNewNumber">Test</v-btn>
    </v-form>

【讨论】:

【参考方案2】:

为此,我们必须

    将值验证为数组(因此单独检查每个项目) 为自己定义 vee 验证规则
// ES6 code
import extend from "vee-validate"
import isEmail, isArray from "validator"

// e.g. check each chip to contain valid email
extend("chipUrlRule", function (val) 
  if (!isArray(val) || val.length < 0) 
    return "Enter at least one Email"
  

  for (let i = 0; i < val.length; i++) 
    if (!isEmail(val[i])) 
      return `$val[i] is not a valid Email Address`
    
  

  return true

)

【讨论】:

以上是关于Vue / Vuetify - 如何对每个芯片项而不是整个选择输入进行验证的主要内容,如果未能解决你的问题,请参考以下文章

Vue, Vuetify 2, v-data-table - 如何在表格底部显示总原始数据

如何在 Laravel 的其他 Vue/Vuetify 组件中嵌入 Vue/Vuetify 组件?

如何使用 vue 3 安装 vuetify 2.5.6?

如何将 Vuetify 注入我的自定义 vue 插件

如何从构建中排除 vuetify 和 vue?

如何隔离 Vuetify 全局样式