そもそもVeeValidateとは?
VeeValidateは、Vue.js用のフォームバリデーションライブラリである。
なぜこの記事を書こうと思ったのか。
VeeValidateの公式ドキュメントが非常に読みづらいからである。
Q.https://vee-validate.logaretm.com/v4/api/use-form/ に書いてあるものをそれぞれドラゴンボールに例えてわかりやすく説明して
A.vee-validateのuseFormのAPIをドラゴンボールに例えて、一つ一つ説明していきます!
基本的なフック(悟空の基本技)
values
戦闘力測定器のようなもの
フォーム内の全ての値(戦闘力)をリアルタイムで測定できる
errors
界王様からの警告メッセージ
技の使い方や戦い方が間違っている時に教えてくれる
meta
悟空の戦闘状態を示すスカウター的な存在
フォームの状態(戦闘中か、エラーがあるかなど)を示す
isSubmitting
かめはめ波を放っている最中かどうか
フォームが送信処理中かどうかを示す
メソッド(使える技)
handleSubmit
「かめはめ波」を放つときの掛け声のような存在
フォームを送信する時の合図
handleReset
仙豆を食べるようなもの
フォームを初期状態に戻す
setFieldValue
瞬間移動のように、特定の場所(フィールド)に直接移動する
フィールドの値を直接設定できる
setFieldError
戦闘力が足りないことを自覚するような
エラーメッセージを手動で設定
setErrors
全体的な戦闘の問題点を認識する
複数のエラーを一度に設定
setValues
超サイヤ人への変身のように、一気に状態を変える
複数のフィールド値を一度に設定
バリデーション関連(戦闘技術)
validate
修行のように、技が正しく使えているか確認する
フォーム全体のバリデーションを実行
validateField
個別の技の練習のように、特定のフィールドだけバリデーション
setTouched
気を感じ取るように、フィールドに触れたことを記録
フィールドが編集されたことをマーク
###その他の状態管理(戦闘状態)
resetForm
全ての技をリセットして初期状態に戻る
フォーム全体を初期状態にリセット
resetField
特定の技だけやり直す
特定のフィールドだけリセット
このように、vee-validateのフォーム管理は、まるで戦闘技術を磨きながら戦っていくようなものです。各機能が協力し合って、最終的に完璧なフォーム(戦い)を実現します!
Q.resetFormには値を入れることができますか?
はい、resetFormには新しい初期値を渡すことができます!
const { resetForm } = useForm({
initialValues: {
powerLevel: 9000,
technique: 'かめはめ波'
}
});
// 新しい値でリセットする
resetForm({
values: {
powerLevel: 15000,
technique: '界王拳'
}
});
ドラゴンボールで例えると、これは「いったん戦闘力をリセットしつつ、新しい技や強さの状態からやり直す」というイメージです。
resetFormには以下のようなオプションを渡せます:
1.values - 新しい初期値
2.touched - タッチ状態(フィールドに触れたかどうか)
3.errors - エラー状態
4.submitCount - 送信回数
全てのオプションは任意で、指定しなかった項目は完全にリセットされます。例えば:
// エラーだけを残して他をリセット
resetForm({
errors: {
powerLevel: '戦闘力が足りません'
}
});
// 値と触れた状態を新しく設定
resetForm({
values: {
powerLevel: 20000
},
touched: {
powerLevel: true
}
});
結果
公式ドキュメントを読むよりわかりやすくVeeValidateについて把握できた。