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

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

vuetify.js vuejs3 validation

1

Qiuzman · 技术社区 · 2 年前

我有一个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 回复 | 直到 2 年前

1

yoduh 2 年前

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