Vuetify でメールアドレスのバリデーションをする

テンプレート

入力項目

<v-text-field

        v-model="nickname"

        ref="nickname"

        :rules="[rules.required, rules.email]"

        @click:append-outer="setUsername"

></v-text-field>

スクリプト

データ

export default {

        data() {

            return {

                rules: {

                        required: value => !!value || 'This field is required.',

                        email: value => {

                            const pattern = /^(([^<>()[\]\\.,;:\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,}))$/;

                            return pattern.test(value) || 'Not an email address.'

                        }

                }

            }

        }

}

メソッド

methods: {

        setUsername(){

            if (this.$refs.nickname.validate()) {

                this.isNickname = !this.isNickname

            }

        }

}

( 参考記事 )