【Nuxt.js】Validation基礎編：フォームバリデーション

前置き

正規表現を使ってフォームバリデーション！
今回はメールアドレス形式
[e-mail]のみ送信可能にします🍒
間違った形式で送られることがないので
トラブル防止などにもなり便利ですね♪

初期準備

今回はコンポーネントは使わず
index.vueの1ページに全て書きます✍️
まずはFormタグと送信ボタンを用意。
基本的なフォーム構成は別記事で解説済み🌟
◾️【Nuxt.js】v-model実践編：オリジナルフォームの簡単な作り方
https://note.com/aliz/n/n5b9bd618399e

{{ Validation.result }}
入力した値それぞれに対応したテキストを表示。
・空の場合
・バリデーションしてNGの場合
・バリデーションしてOKの場合

index.vue

<template>
 <div class="page">
   <p>{{ Validation.result }}</p>
   <form @submit.prevent>
     <label>Mail
       <input
         type="text"
         placeholder="メールアドレスを入力"
         v-model="mail"
       >
     </label>
   </form>
   <button type="submit" @click="checkForm">
     送信
   </button>
 </div>
</template>

<script>
export default {
 data () {
   return {
     mail: "",
     Validation:{
       result: "",
     },
   }
 },
}
</script>

methodsを追加(正規表現)

【基礎文法】
Vueの公式ページをご確認ください。
https://jp.vuejs.org/v2/cookbook/form-validation.html#カスタムバリデーションの利用

index.vue

methods名: function (引数名) {
  var 変数名 = 正規表現;
  return 変数名.test(引数名);
}

【コード】
引数名は分かりやすくinputdataに、
変数名は正規表現を英語にしたregexに。
正規表現についてはこちらで解説しています。
◾️【Nuxt.js】正規表現基礎編①：よく使う表現を単語分割で解説！
https://note.com/aliz/n/n898319c9042d

index.vue

<script>
export default {
 data () {
   return {
     mail: "",
     Validation:{
       result: "",
     },
   }
 },
 methods:{
   checkString (inputdata){
     var regex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
     return regex.test(inputdata);
   }
 }
}
</script>

methodsを追加(送信可不可)

【構成】
送信ボタンを押すとcheckForm発動。
2つに分けて考えます。
これを分けるために変数mailBoolの
真偽値によってパターン分けしています💡
◾️空入力＆形式が間違った場合
　mailBool = false
◾️形式が正しい場合
　mailBool = true

【コード】

index.vue

<script>
export default {
 data () {
   return {
     mail: "",
     Validation:{
       result: "",
     },
   }
 },
 methods:{
   checkForm() {
     var mailBool = false
     if (!this.mail) {
       this.Validation.result="入力してください"
     }
     else if (!this.checkString(this.mail)){
       this.Validation.result="メールアドレス形式で入力してください"
     } else {
       mailBool = true
     }

     if(mailBool === true){
       this.Validation.result="送信に成功しました！"
       alert(this.mail + 'で送信しました。');
       console.log(this.mail);
       this.mail = "";
     }
   },
   checkString (mail){
     var regex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
     return regex.test(mail);
   }
 }
}
</script>

【解説】
◾️空入力＆形式が間違った場合
　mailBool = false
　・if (!this.mail)
　　　data内mail=inputの入力がfalse(空)なら
　　　該当テキストを表示
　・else if (!this.checkString(this.mail))
　　　空ではないが、
　　　checkString関数でthis.mailを
　　　バリデーションしてfalseなら
　　　該当テキストを表示
　・else { mailBool = true }
　　　どちらでもなく正しく入力された場合
　　　mailBool = trueにする

◾️形式が正しい場合
　mailBool = true
　・this.mail = "";
　　　送信後はメールアドレスを
　　　残したままにせず空に戻す

全体コード

index.vue

<template>
 <div class="page">
   <p>{{ Validation.result }}</p>
   <form @submit.prevent>
     <label>Mail
       <input
         type="text"
         placeholder="メールアドレスを入力"
         v-model="mail"
       >
     </label>
   </form>
   <button type="submit" @click="checkForm">
     送信
   </button>
 </div>
</template>

<script>
export default {
 data () {
   return {
     mail: null,
     Validation:{
       result: "",
     },
   }
 },
 methods:{
   checkForm() {
     var mailBool = false
     if (!this.mail) {
       this.Validation.result="入力してください"
     }
     else if (!this.checkString(this.mail)){
       this.Validation.result="メールアドレス形式で入力してください"
     } else {
       mailBool = true
     }

     if(mailBool === true){
       this.Validation.result="送信に成功しました！"
       alert(this.mail + 'で送信しました。');
       console.log(this.mail);
       this.mail = "";
     }
   },
   checkString (inputdata){
     var regex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
     return regex.test(inputdata);
   }
 }
}
</script>

<style lang="scss" scoped>
.page {
 padding: 50px 20px;
 p {
   font-size: 24px;
   position: absolute;
   top: 10px;
 }
 label {
   display: block;
   margin-top: 5px;
 }
}
</style>