Vueと共通

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

前置き

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

初期準備

今回はコンポーネントは使わず
index.vueの1ページに全て書きます✍️
まずはFormタグと送信ボタンを用意。
基本的なフォーム構成は別記事で解説済み🌟

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

) pages

methodsを追加(正規表現)

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

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

【コード】
引数名は分かりやすくinputdataに、
変数名は正規表現を英語にしたregexに。
正規表現についてはこちらで解説しています。

) pages

methodsを追加(送信可不可)

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

) pages

【解説】
◾️空入力&形式が間違った場合
 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 = "";
   送信後はメールアドレスを
   残したままにせず空に戻す

全体コード

-Vueと共通
-, ,

© 2020 aLiz Nuxt