【保存版】Vue.jsのフォーム作成にて簡単バリデーションを実装
はじめに
本記事へのアクセスありがとうございます。
投稿主はプログラミング初心者であり、この方法が「最適解」かは分かりません。
しかし、動作は検証済みです。
こんなやり方もできるんだ〜程度に見てもらえれば幸いです。
さっそくスタート
Vueにおいて1からバリデーションを実装しよう思うと初心者には大変なので、今回はVuelidateというライブラリを使用します。
他にもVeeValidateというライブラリも有名なので、本記事が上手くいかない、納得いかない方はそちらを試してみることをオススメします。
では、まずVuelidateをダウンロードするために下記のコードを実装します。
この記事ではyarnでダウンロードを記載していきますが、npmの方はnpmのダウンロード方法でお願いします。
yarn add --dev vuelidate
webpackのentry先であるjs（ここではmain.js)に下記のコードを追記します。
import Vuelidate from 'vuelidate';
Vue.use(Vuelidate);
これで設定は完了です。
さっそく簡単なフォームを作成して、そこにvuelidateを使用していきます。
<div>
<input
type="text"
class="vInput"
v-model="validationInput"
@blur="$v.validationInput.$touch()"
:class="{ error: $v.validationInput.$error, vInput: true }"
/>
<select
class="vSelect"
v-model="validationSelect"
@change="$v.validationSelect.$touch()"
:class="{ error: $v.validationSelect.$error, vSelect: true }"
>
<option disabled value="">選択してください</option>
<option v-for="item in items" :key="item.index" :value="item.value">
{{ item.text }}
</option>
</select>
<button @click="post">POST！</button>
</div>
import { required } from "vuelidate/lib/validators";
data() {
return {
validationInput: "",
validationSelect: "",
items: [
{ text: "サーモン", value: "sushi" },
{ text: "醤油ラーメン", value: "ramen" },
{ text: "インドカレー", value: "carry" },
{ text: "ハーゲンダッツ", value: "ice cream" },
],
};
},
validations: {
validationInput: {
required,
},
validationSelect: {
required,
},
},
methods: {
post() {
this.$v.$touch();
if (this.$v.$invalid) {
console.log("バリデーションエラー");
} else {
実行したい処理
}
}
}
.error {
color: #8a0421;
border-color: #dd0f3b;
background-color: #ffd9d9;
}
上記のコードをすごく簡単に説明します。
1. POST！ボタンをクリックして、上記のフォーム（inputタグまたはselectタグ）で記載忘れしていると、処理が走らないようになっています。
2. styleで.errorを記載しているので、エラーになった時に赤枠で囲まれるようになっています。
3. @blur〜〜はテキストを全て入力後の判定して用いられるが、一文字一文字に判定をさせたい時は@input〜〜を用いる事で代用できます。個人的には@blur〜〜を用いた方がユーザーにとって使いやすいフォームになると思います。
上記のコードでは最低限の事しか扱っていませんが、上限文字数 / 下限文字数を設定したり色々なオプションを設定できるので、より複雑な設定をしたい方は一度公式ホームページのドキュメントに目を通す事をオススメします。
⬇︎公式ホームページ
https://vuelidate.js.org/#sub-package-content
オプション設定の参考までに最大文字数を設定する時は下記のようにします。
import { required, maxLength } from "vuelidate/lib/validators";
validationInput: {
required,
maxLength: maxLength(100),
},
おわり
お疲れ様でした。これでVue.jsおけるvuelidateを用いたバリデーション設定の完了です。
少しでも役に立ったと思う方がいましたらLGTMをお願いします🙇♂️
Author And Source
この問題について(【保存版】Vue.jsのフォーム作成にて簡単バリデーションを実装), 我々は、より多くの情報をここで見つけました https://qiita.com/Motonosuke/items/c21d52deddc7287ef57e著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .