Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
VeeValidate 3
Search
igayamaguchi
December 23, 2019
Technology
3
590
VeeValidate 3
Roppongi.vue #4
https://roppongi-vue.connpass.com/event/155383/
igayamaguchi
December 23, 2019
Tweet
Share
More Decks by igayamaguchi
See All by igayamaguchi
Vue.js、Nuxtの機能を使い、 大量のコピペコードをリファクタリングする
igayamaguchi
3
5.7k
一休/Yahooトラベル、マルチブランドにまたがるデザインシステム
igayamaguchi
1
580
==と===を調べてみた
igayamaguchi
0
510
Other Decks in Technology
See All in Technology
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
2
690
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
3
980
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
6
4.1k
インフラ寄りSREの生存戦略
sansantech
PRO
9
3.4k
助けて! XからWaylandに移行しないと新しいGNOMEが使えなくなっちゃう 2025-07-12
nobutomurata
2
140
話題の MCP と巡る OCI RAG ソリューションの旅 - Select AI with RAG と Generative AI Agents ディープダイブ
oracle4engineer
PRO
5
110
Operating Operator
shhnjk
1
650
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
220
ABEMAの本番環境負荷試験への挑戦
mk2taiga
5
810
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
250
事例で学ぶ!B2B SaaSにおけるSREの実践例/SRE for B2B SaaS: A Real-World Case Study
bitkey
1
340
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
240
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Docker and Python
trallard
45
3.5k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
A better future with KSS
kneath
238
17k
Transcript
VeeValidate 3 @igayamaguchi 2019/12/23 Roppongi.vue #4
自己紹介 ・Twitter: @igayamaguchi ・一休 宿泊事業本部 UI/UXチームで フロントエンド寄りのエンジニア ・業務でVue.jsずっと触ってます ・漫画好き、最近はマガジンが熱い ・VTuberとか好き
VeeValidate Template Based Validation Framework for Vue.js Vueのバリデーションライブラリ コンポーネントの組み合わせでバリデーションができる 今日は3の使い方を紹介
VeeValidate 3 2019/8/24リリース
1年半越しのアップデート ・2.0.0 2017/12/28 ・3.0.0 2019/8/24 ・3.2.0 2019/12/14 ← 最新
VeeValidateを使う やることは3つだけ ・バリデーションルールの設定 ・コンポーネントの使用 ・コンポーネントから提供されるメソッドの使用 import { extend, localize }
from 'vee-validate'; import ja from 'vee-validate/dist/locale/ja.json'; import { required } from 'vee-validate/dist/rules'; localize({ ja }); localize('ja'); extend('required', required); <validation-provider name="名" rules="required|alpha|max:10" v-slot="{ errors }" > <label> <input type="text" v-model="firstName" name="first-name"> </label> <p v-if="errors[0]">{{ errors[0] }}</p> </validation-provider>
初期設定 最低限必要なのはバリデーションルールの設定のみ vee-validate/dist/rulesに基本的なバリデーションは用意されている import { localize, extend } from 'vee-validate';
import ja from 'vee-validate/dist/locale/ja.json'; import { required, alpha, max } from 'vee-validate/dist/rules'; localize({ ja }); localize('ja'); extend('required', required); extend('alpha', alpha); extend('max', max);
カスタムルール extendの第一引数にルール名 第二引数にvalidate(検証)、message(エラーメッセージ)を定義したオブジェクト import { extend } from 'vee-validate'; import
hoge from './Validations/hoge'; extend('hoge', { validate: value => { /* 値を検証して真偽値を返す */ }, message: '{_field_}の形式が正しくありません。', });
ValidationProvider バージョン2.1で実装されたコンポーネント このコンポーネントを用いてバリデーションを行う inputに設定された v-modelを監視してくれる 検証結果等がスロットプロパティ として提供される <validation-provider name="名" rules="required|alpha|max:10"
v-slot="{ errors }" > <label> <input type="text" v-model="firstName" name="first-name"> </label> <p v-if="errors[0]">{{ errors[0] }}</p> </validation-provider>
スロットプロパティにエラーメッセージの配列 スロットプロパティのerrorsにエラーメッセージが格納される デフォルトは最初に引っかかったエラーメッセージのみ 設定によって途中で検証を止めるか止めないかを設定できる import { configure } from 'vee-validate';
configure({ bails: false }); <validation-provider name="名" rules="required|alpha|max:10" v-slot="{ errors }" :bails="false" > [ "名はアルファベットのみ使用できます" ]
ValidationObserver バージョン2.1で実装されたコンポーネント 内部にネストされた全てのフィールドのエラーメッセージをまとめてくれる <validation-observer ref="validationObserver"> <validation-provider rules="required"> <input type="text" v-model="hoge">
</validation-provider> <validation-provider rules="required"> <input type="text" v-model="fuga"> </validation-provider> </validation-observer> methods: { submit() { const isValid = this.$refs.validationObserver.validate(); if (isValid) { return; } // 後続処理 } }
VeeValidateを使わなかったら? watch: { firstName(value) { const errors = []; if
(!value || value.length === 0) { errors.push('名は必須です'); } if (!/^[A-Z]*$/i.test(value)) { errors.push('名はアルファベットのみでご入力ください'); } if (value.length > 10) { errors.push('名は10文字まででご入力ください'); } this.firstNameError = errors[0] ? errors[0] : ''; }, } submit() { if (!this.firstNameError && !this.lastNameError) { return; } // 後続処理 }
バージョン2から変わったこと パフォーマンス向上、ファイルサイズの削減 多くの破壊的変更 v-validateの廃止、data-vv-asの廃止、$validatorプロパティの廃止...etc 新機能というよりは仕様が大きく変わっている 詳しくは技術ブログで https://user-first.ikyu.co.jp/entry/2019/12/03/000000
終