Vue/Vuetify - 如何对每个芯片项目而不是整个选择输入进行验证 [英] Vue / Vuetify - How to make a validation on each chip item instead of the entire select input

问题描述

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

我有这段代码:

 {如果(有效){console.log('提交')} 别的 {返回假}})}}}

现在验证只发生在整个电话号码输入上.我想知道如何让它在每个芯片上工作，在这个输入中将 min_value 设置为 9，将 max_value 设置为 15.

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

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

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

谢谢

解决方案

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

 inputRules = [(v: 任何) =>{if (!v || v.length <1)return '需要输入';否则如果(v.length > 0){for (让 i = 0; i < v.length; i++) {如果 (v[i].length > 9)返回无效号码"；}}否则返回真；}];

<块引用>

<v-选择class="elevation-0 mt-border-bottom"v-model="电话号码"label="添加电话号码"筹码标签独奏前置图标=电话"可清除data-vv-name="电话号码"必需的:rules="输入规则"><template slot="selection" slot-scope="data"><v-芯片关闭大纲黑暗的@input="remove(data.item)":selected="data.selected"><strong>{{ data.item }}</strong></v-chip></模板></v-select><v-btn @click.native="submitNewNumber">测试</v-btn></v-form>

Does anyone know how to make validation (with vee-validate) on each chips item?

I have this piece of code:

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

And now the validation is happening on the entire Phone Number input only. I would like to know how I can make it work on each chip, inside this input setting the min_value to 9 and max_value to 15.

Vuetify - Chips usage: https://vuetifyjs.com/en/components/chips

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

Vee-validate - validation rules: https://baianat.github.io/vee-validate/guide/rules.html

Thank you

解决方案

It seems there isn't build in validation functionality for v-chip. So I am using the default validation(not vee-validate). In that way you can see the results of v-select. You can then loop through the results and validate each value.

        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>

这篇关于Vue/Vuetify - 如何对每个芯片项目而不是整个选择输入进行验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！