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.8k
一休/Yahooトラベル、マルチブランドにまたがるデザインシステム
igayamaguchi
1
580
==と===を調べてみた
igayamaguchi
0
510
Other Decks in Technology
See All in Technology
帳票構造化タスクにおけるLLMファインチューニングの性能評価
yosukeyoshida
1
170
「育てる」サーバーレス 〜チーム開発研修で学んだ、小さく始めて大きく拡張するAWS設計〜
yu_kod
1
200
AI によるドキュメント処理を加速するためのOCR 結果の永続化と再利用戦略
tomoaki25
0
200
オブザーバビリティプラットフォーム開発におけるオブザーバビリティとの向き合い / Hatena Engineer Seminar #34 オブザーバビリティの実現と運用編
arthur1
0
120
興味の胞子を育て 業務と技術に広がる”きのこ力”
fumiyasac0921
0
340
From Live Coding to Vibe Coding with Firebase Studio
firebasethailand
1
330
LLM開発を支えるエヌビディアの生成AIエコシステム
acceleratedmu3n
0
340
スプリントレビューを効果的にするために
miholovesq
9
1.7k
Railsの限界を超えろ!「家族アルバム みてね」の画像・動画の大規模アップロードを支えるアーキテクチャの変遷
ojima_h
4
530
Recoil脱却の現状と挑戦
kirik
3
480
LLMでAI-OCR、実際どうなの? / llm_ai_ocr_layerx_bet_ai_day_lt
sbrf248
0
340
Kiroから考える AIコーディングツールの潮流
s4yuba
1
500
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
431
65k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Code Reviewing Like a Champion
maltzj
524
40k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Faster Mobile Websites
deanohume
308
31k
Site-Speed That Sticks
csswizardry
10
730
Designing Experiences People Love
moore
142
24k
For a Future-Friendly Web
brad_frost
179
9.8k
Embracing the Ebb and Flow
colly
86
4.8k
Visualization
eitanlees
146
16k
Bash Introduction
62gerente
613
210k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
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
終