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
570
==と===を調べてみた
igayamaguchi
0
510
Other Decks in Technology
See All in Technology
「規約、知識、オペレーション」から考える中規模以上の開発組織のCursorルールの 考え方・育て方 / Cursor Rules for Coding Styles, Domain Knowledges and Operations
yuitosato
6
1.8k
新卒3年目の後悔〜機械学習モデルジョブの運用を頑張った話〜
kameitomohiro
0
320
評価の納得感を2段階高める「構造化フィードバック」
aloerina
1
210
Agentic DevOps時代の生存戦略
kkamegawa
0
460
ObsidianをMCP連携させてみる
ttnyt8701
2
130
AIにどこまで任せる?実務で使える(かもしれない)AIエージェント設計の考え方
har1101
3
1.2k
Securing your Lambda 101
chillzprezi
0
290
Autonomous Database サービス・アップデート (FY25)
oracle4engineer
PRO
2
780
菸酒生在 LINE Taiwan 的後端雙刀流
line_developers_tw
PRO
0
210
OAuth/OpenID Connectで実現するMCPのセキュアなアクセス管理
kuralab
1
120
ユーザーのプロフィールデータを活用した推薦精度向上の取り組み
yudai00
0
410
2025/6/21 日本学術会議公開シンポジウム発表資料
keisuke198619
2
390
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
GraphQLとの向き合い方2022年版
quramy
46
14k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
660
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Unsuck your backbone
ammeep
671
58k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
910
Navigating Team Friction
lara
186
15k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Six Lessons from altMBA
skipperchong
28
3.8k
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
終