javascript - Vue.js 中可以用来验证输入格式的简单函数是什么？

Question

在 Vue.js 中我有这个:

<template>
    <button @click="sendMail(); $emit('close')">Send</button>
</template>
<script>
    methods: {
        sendMail () {
            axios.post('/mail', {email: this.email});
            this.$notify.make('Sent!', 'success');
        },
        invalidEmail () {
            this.$notify.make('Invalid email format!', 'failure'):
        }
    }
</script>

当电子邮件输入的格式无效时，如何触发 invalidEmail()？

Answer 1

您可以使用正则表达式来检查电子邮件的有效性。

正则表达式的来源:http://emailregex.com/

<template>
    <button @click="sendMail(); $emit('close')">Send</button>
</template>
<script>
    // Here is the regex to test if an email is valid
    const mailRegex = /^(([^<>()[\]\\.,;:\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,}))$/;
    module.exports = {
        // [...]
        methods: {
            sendMail () {
                // If this.email is not a valid email, abort by return and call this.invalidEmail
                if (!mailRegex.test(this.email)) return this.invalidEmail();

                axios.post('/mail', {email: this.email});
                this.$notify.make('Sent!', 'success');
            },
            invalidEmail () {
                this.$notify.make('Invalid email format!', 'failure'):
            }
        }
    }
</script>