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 - 如何在表格底部显示总原始数据