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
450
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
一休/Yahooトラベル、マルチブランドにまたがるデザインシステム
igayamaguchi
1
350
==と===を調べてみた
igayamaguchi
0
480
Other Decks in Technology
See All in Technology
LLM + RAG を使った SORACOM Support Bot の裏側の歴史
soracom
PRO
1
640
Getting started with controlling LEGO using Swift
hcrane
0
140
初心者が行く!サーバレスWebアプリ開発の道
nagaharutogawa
0
450
今さら聞けない!? AWSの生成AIサービス Amazon Bedrock入門!
minorun365
PRO
11
2.7k
サービスメッシュ環境における OpenTelemetry 活用 / OpenTelemetry in Service Mesh
k6s4i53rx
2
870
MongoDB Atlas Vectorsearchではじめる生成AIアプリ開発
chie8842
3
510
AWS アーキテクチャクイズ
yuu26
2
700
GraphQLに入門してみた
chiroruxx
2
130
継続的テストモデルを実現するためにスリーアミーゴスを用いた10Xでのシフトレフトの事例
nihonbuson
3
260
中央集権体制からDataOpsへの転換 / centralized-to-dataops-transformation
pei0804
7
1.6k
LLMプロダクト事業の立ち上げにおける挑戦
layerx
PRO
7
1.5k
KubeCon EU: Unlocking new Platform Experiences with Open Interfaces
salaboy
1
380
Featured
See All Featured
Facilitating Awesome Meetings
lara
39
5.5k
Thoughts on Productivity
jonyablonski
57
3.8k
WebSockets: Embracing the real-time Web
robhawkes
59
6.9k
In The Pink: A Labor of Love
frogandcode
137
21k
4 Signs Your Business is Dying
shpigford
174
21k
Automating Front-end Workflow
addyosmani
1353
200k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
219
21k
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.6k
Statistics for Hackers
jakevdp
789
220k
Writing Fast Ruby
sferik
619
59k
Typedesign – Prime Four
hannesfritz
36
2k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
178
11k
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
終