VeeValidateって何。
今日はバディ面談で河原さんと就活に関してお話ししたり、Discordで西村さんとお話ししたりして、エンジニアになる決意がより一層強まったぞ!みんなもバディさんや西村さんを頼ってくれよな!
#らんてくん感
さて、今回はバリデーションに関して。
ログインをする時や診断をする時、必ずフォームに値を入力しますよね。
入力内容に誤りがあった場合、DBにアクセスする(送信ボタンやログインボタンを押す)前にどこにエラーがあるかわかった方が二度手間を防げていいなって思いました。
それをフロントで実装してくれるものがVeeValidateだそうで。学習していきます。
VeeValidateって何
Vue.jsのために開発された、バリデーション実装のテンプレート。
簡潔にバリデーションを描くことができる。
どう書くの?
plugin/vee-validate.jsに下記のように書き込む。
import Vue from 'vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);
エントリーファイルに差し込む
import Vue from 'vue';
import App from '../App';
import * as VeeValidate from '../plugins/vee-validate';
document.addEventListener('DOMContentLoaded', () => {
const app = new Vue({
VeeValidate,
render: (h) => h(App),
}).$mount();
document.body.appendChild(app.$el);
console.log(app);
});
VeeValidateは、rubyがUser < ApplicationRecordとするとvalidate:を使えるように、vee-validate/dist/rulesから必要なバリデーションメソッドをimportしてくると各種バリデーションを使うことができるようになる。
import { required, email, min, max, regex, confirmed } from 'vee-validate/dist/rules';
主要なオプションメソッド
alpha_num 数字とアルファベットのみ 全角は対象外
between 数値の範囲
confirmed 確認用フィールド
required_if あるフィールドが特定の値の場合のみ別フィールドを必須にする
アップロードするファイルの拡張子や MIME type チェック、ファイルサイズチェックなど
実際の使い方
ログイン画面では下記のように:rulesを使って記述する。ちなみに:はv-bindの省略形。#はv-slotで、@はv-on。最大10文字かつ必須項目というバリデーションをかけている。
<v-card-text>
<ValidationProvider
v-slot="{ errors }"
mode="blur"
:rules="{ required: true,max: 10 }"
name="ニックネーム"
>
<v-text-field
id="user-nickname"
type="text"
label="ニックネーム"
:value="nickname"
:error-messages="errors"
@input="$emit('update:nickname', $event)"
/>
</ValidationProvider>
:error-messages="errors"のように双方向バインディングをすることで、:rulesにマッチしなかった場合に、slotにerrorsを渡すことができる。
ValidationProviderはバリデーションを効かせたい箇所を包むメソッド。
何が美味しいの?
簡単で、フレキシブルで、選択の自由がある点が美味しいと公式サイトでは述べられている。
- ルール、メッセージ定義の共通化が容易
- よくあるルールはあらかじめ組み込まれている
- 複数のフィールドに対するバリデーションに対応
所感
- 一意のユーザーかどうか判別する記述が難しい。
extend('isUnique', {
params: ['column'],
async validate(value, { column }) {
let response = await axios.get('validations/unique', { params: { [column]: value } });
if (response.data === 'unique') {
return true;
} else {
return '{_value_}は既に使われています';
}
},