Vue.jsの入力のフォーマットを検証するために使用できる単純な関数は何ですか？ Vue.jsで

Question

私はこれを持っている：Eメールの入力が有効な形式でないとき

<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>