Reputation:
I'm trying to create a field where user can input multiple valid email addresses. Onclick 'Enter' key, the last inputted email will be validated if it's a valid email or not. I tried to do this with what I've come up with below but I don't have enough knowledge in Vue JS or Vuetify JS. I think my method of validating an email address is incorrect ( !(v => /.+@.+/.test(v))
), I just took it from the Vuetify JS website's Form examples. I would like to ask- what is the correct method to validate emails in this kind of case?
Here is my code:
<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>
Thanks a lot!
Upvotes: 0
Views: 1412
Reputation:
I did it like this:
if (!(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,24}))$/.test(v[i]))) {
return 'Invalid email';
}
It now works.
Upvotes: 2