时间戳

首页 > 解决方案 > 验证芯片内的电子邮件地址

vue.js - 验证芯片内的电子邮件地址

问题描述

我正在尝试创建一个用户可以输入多个有效电子邮件地址的字段。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>&nbsp;
            </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.jsvuetify.js

解决方案

我是这样做的：

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';
}

现在可以了。

推荐阅读