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

前置き

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

初期準備

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

【Nuxt.js】v-model実践編：オリジナルフォームの簡単な作り方

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

) pages

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

<p>{{ Validation.result }}</p>

<label>Mail

<input

type="text"

placeholder="メールアドレスを入力"

v-model="mail"

</label>

</form>

送信

</button>

</div>

</template>

export default {

data () {

return {

mail: "",

Validation:{

result: "",

}

</script>

methodsを追加(正規表現)

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

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

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

【Nuxt.js】正規表現基礎編①：よく使う表現を単語分割で解説！

) pages

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

) pages

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

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 = "";
　　　送信後はメールアドレスを
　　　残したままにせず空に戻す

全体コード

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

<p>{{ Validation.result }}</p>

<label>Mail

<input

type="text"

placeholder="メールアドレスを入力"

v-model="mail"

</label>

</form>

送信

</button>

</div>

</template>

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>

.page {

padding: 50px 20px;

p {

font-size: 24px;

position: absolute;

top: 10px;

}

label {

display: block;

margin-top: 5px;

}

</style>