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
600
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
6k
一休/Yahooトラベル、マルチブランドにまたがるデザインシステム
igayamaguchi
1
590
==と===を調べてみた
igayamaguchi
0
520
Other Decks in Technology
See All in Technology
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
4
440
Access-what? why and how, A11Y for All - Nordic.js 2025
gdomiciano
1
120
Geospatialの世界最前線を探る [2025年版]
dayjournal
0
170
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
240
AI ReadyなData PlatformとしてのAutonomous Databaseアップデート
oracle4engineer
PRO
0
230
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
4
300
「AI駆動PO」を考えてみる - 作る速さから価値のスループットへ:検査・適応で未来を開発 / AI-driven product owner. scrummat2025
yosuke_nagai
3
770
o11yで育てる、強い内製開発組織
_awache
3
140
能登半島災害現場エンジニアクロストーク 【JAWS FESTA 2025 in 金沢】
ditccsugii
0
180
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
ishikawa_satoru
1
360
大規模サーバーレスAPIの堅牢性・信頼性設計 〜AWSのベストプラクティスから始まる現実的制約との向き合い方〜
maimyyym
4
3.4k
Simplifying Cloud Native app testing across environments with Dapr and Microcks
salaboy
0
110
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
33
8.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
970
Raft: Consensus for Rubyists
vanstee
139
7.1k
Balancing Empowerment & Direction
lara
4
680
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
860
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
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
終