【发布时间】:2019-07-30 04:06:10
【问题描述】:
我正在尝试创建一个用户可以输入多个有效电子邮件地址的字段。 Onclick 'Enter' 键,将验证最后输入的电子邮件是否为有效电子邮件。我试图用我在下面提出的内容来做到这一点,但我对 Vue JS 或 Vuetify JS 没有足够的知识。我认为我验证电子邮件地址的方法不正确(!(v => /.+@.+/.test(v))),我只是从 Vuetify JS 网站的表单示例中获取的。我想问一下——在这种情况下验证电子邮件的正确方法是什么?
这是我的代码:
<template>
<v-combobox v-model="chips"
label="Emails"
chips
clearable
solo
:rules="emailRules"
multiple>
<template v-slot:selection="data">
<v-chip :selected="data.selected"
close
@input="remove(data.item)">
<strong>{{ data.item }}</strong>
</v-chip>
</template>
</v-combobox>
</template>
<script>
export default {
data() {
return {
chips: [],
emailRules :[
v => {
if (!v || v.length < 1)
return 'Input is required';
else if (v.length > 0) {
for (let i = 0; i < v.length; i++) {
if ((i == v.length-1) && !(v => /.+@.+/.test(v)))
return 'Invalid email';
}
}
else return true;
}
]
}
},
methods: {
remove(item) {
this.chips.splice(this.chips.indexOf(item), 1)
this.chips = [...this.chips]
}
}
}
</script>
非常感谢!
【问题讨论】:
标签: vue.js vuetify.js