代码之家 › 专栏 › 技术社区 › Qiuzman

如何确保v-combobox中的所有项目都遵循规则

vuetify.js vuejs3 validation

Qiuzman · 技术社区 · 11 月前

我有一个v-combobox,它允许用户从电子邮件地址列表中选择或添加不在列表中的新地址。问题是该规则并不适用于列表中的所有项目。因此,如果添加了一个新项目,表明电子邮件无效,但已经有一个有效条目,那么它就会失败。我需要验证规则来检查数组中的每个项目。这是我尝试过的:

                    <v-combobox
                    color="primary"
                    label="To"
                    :items="stateData && stateModel ? stateData.find(item => item.state_id == stateModel?.state_id)?.state_contacts : []"
                    item-title="email_address"
                    v-model="toModel"
                    :rules="emailRule"
                    chips
                    multiple
                    variant="outlined"/>

规则如下:

  const emailArrayRule = [ (e: any, value: string) => /.+@.+/.test(value) || 'Invalid Email address' ]

这可以使用上面的规则符号来完成吗?还是我需要手动循环每个数组并创建一个触发失败的自定义函数?对如何处理这个问题感兴趣。

1 回复 | 直到 11 月前

yoduh 11 月前

value 在你的规则中不一个字符串,但它是一个字符串数组。正则表达式 test 函数使用array.toString()将数组强制转换为单个字符串。

a值

['[email protected]', 'notanemail']

然后按照以下方式进行测试

'[email protected],notanemail'

您的测试正在寻找单个 @ 字符然后返回true。您需要循环数组,而不是让正则表达式将其强制转换为字符串。

const emailRule = [ (values: string[]) => {
  if (!values) return true
  for (const val of values) {
    if(!/.+@.+/.test(val)) return 'Invalid Email address'
  }
  return true
}]

Vuetify Playground example

推荐文章

Tyssen · Vue3组件中没有可用的道具

6 月前

Felix · 更改vuetify v-field标签字体大小

6 月前

Qiuzman · 如何确保v-combobox中的所有项目都遵循规则

11 月前

Iliya · @更新:Vuetify3中的分页?

1 年前

leojail · 如何在保持最右侧列对齐的同时,将项目包装在div中来对齐项目?

1 年前

Myriad · VueJS CSS动画未扩展到v-card/v-col之外

1 年前

tsiPlus · 从v-autocomplete vuetify组件中清除选择

1 年前

Developer · Vuetify快速失败不会阻止发送表单

1 年前

ekjcfn3902039 · Vuetify/Vue3插槽在模板之间隐藏

1 年前

KorbenDose · Vue Transition无法使用v-autocomplete

1 年前