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
Vue meet up sapporo #1 VeeValidateの紹介
Search
nagasawaaaa
April 19, 2019
1
310
Vue meet up sapporo #1 VeeValidateの紹介
フォーム作成時にお世話になったVeeValidate を紹介します
nagasawaaaa
April 19, 2019
Tweet
Share
More Decks by nagasawaaaa
See All by nagasawaaaa
勉強会を開いてよかった話
nagasawaaaa
0
500
CSS Transform Simulator を Vue.js で 作った話
nagasawaaaa
1
430
gulpをv3系から v4系にアップデートした話
nagasawaaaa
1
380
Featured
See All Featured
Embracing the Ebb and Flow
colly
78
4.1k
Adopting Sorbet at Scale
ufuk
66
8.5k
Teambox: Starting and Learning
jrom
126
8.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
12
1.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
67
38k
What’s in a name? Adding method to the madness
productmarketing
PRO
14
2.6k
From Idea to $5000 a Month in 5 Months
shpigford
376
45k
What's in a price? How to price your products and services
michaelherold
236
11k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
Raft: Consensus for Rubyists
vanstee
130
6.2k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Automating Front-end Workflow
addyosmani
1353
200k
Transcript
ϑΥʔϜ࡞࣌ʹ ͓ੈʹͳͬͨ 7FF7BMJEBUFΛհ͠·͢ WTBQQPSP .FFU6Q
• ᖒ ݡʢͳ͕͞Θ ͞ͱ͠ʣ • גࣜձࣾύϯη • ϑϩϯτΤϯυΤϯδχΞ • ຊਓੜॳ-5ʢ-5ಐఃʣ
• 7VFKTྺ ϲ݄͘Β͍ • 7VF /VYU ͘͘ձͬͯ·͢ • ͖ͳͷ • ΨϯμϜγϦʔζ • ϚΫϩεγϦʔζ • ՆϑΣε • ͓ञ • 7VFKT OBHBTBXBBBB
7FF7BMJEBUFͱ
7FF7BMJEBUFެࣜυΩϡϝϯτʹΑΔͱʜ • 5FNQMBUF#BTFE7BMJEBUJPO'SBNFXPSLGPS7VFKT • ຊޠ༁ʣ7VFKT༻ͷςϯϓϨʔτϕʔεͷݕূϑϨʔϜϫʔΫ • ࣗղऍʣϑΥʔϜͷόϦσʔγϣϯΛ͍͍ײ͡ʹͬͯ͘ΕΔϥΠϒϥϦ
7FF7BMJEBUFʹ͓ੈʹͳͬͨܦҢ • ϑϩϯτͰόϦσʔγϣϯ͢Δཁ݅ͩͬͨ • 7VF 7BMJEBUJPOͰάάͬͯ࠷ॳͷํʹग़͖ͯͨ • υΩϡϝϯτݟΔײ͡ಋೖָͦ͏ͩͬͨ • άάͬͨ݁ՌɺઌਓͷܙΛआΓΕͦ͏ͳ͘Β͍ʢຊޠͷʣهࣄ͕ଟ͔ͬͨ
࠾༻ͩʂ
7FF7BMJEBUFಋೖํ๏
طଘͷΣϒαΠτʹಋೖ͢Δ߹
࣍ͷίʔυΛIUNMͷԼͷํʹՃ͢Δ <!-- Vue本体 --> <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script> <!-- VeeValidate --> <script
src="//cdnjs.cloudflare.com/ajax/libs/vee-validate/2.2.2/vee-validate.js"></script> IUUQTCBJBOBUHJUIVCJPWFFWBMJEBUFHVJEFHFUUJOHTUBSUFEIUNMJOTUBMMBUJPO ࢀߟ
طଘͷΣϒαΠτʹ 7FF7BMJEBUF ಋೖ %POF
7VFΞϓϦʹಋೖ͢Δ߹
OQN PSZBSOͰΠϯετʔϧ $ npm install vee-validate --save or $ yarn
add vee-validate IUUQTCBJBOBUHJUIVCJPWFFWBMJEBUFHVJEFHFUUJOHTUBSUFEIUNMJOTUBMMBUJPO ࢀߟ
NBJOKT ʹ JNQPSU͢Δ import VeeValidate from 'vee-validate' Vue.use(VeeValidate) IUUQTCBJBOBUHJUIVCJPWFFWBMJEBUFHVJEFHFUUJOHTUBSUFEIUNMVTBHF ࢀߟ
7VFΞϓϦʹ 7FF7BMJEBUF ಋೖ %POF
%&.0 ΣϒαΠτʹಋೖ͢ΔύλʔϯͰಈ࡞֬ೝ
Ͷʁ؆୯Ͱ͠ΐʁ
͔͠͠ Τϥʔϝοηʔδ͕ӳޠ
ຊޠͷΤϥʔϝοηʔδΛ ද͍ࣔͤͨ͞
طଘͷΣϒαΠτʹಋೖ͢Δ߹
ຊޠͷMPDBMFϑΝΠϧΛ 7VFຊମͱ7FF7BMJEBUFͷԼʹՃ͢Δ <!-- Vue本体 --> <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script> <!– VeeValidate -->
<script src="//cdnjs.cloudflare.com/ajax/libs/vee-validate/2.2.2/vee-validate.js"></script> <!– locale ファイル --> <script src="//cdnjs.cloudflare.com/ajax/libs/vee-validate/2.2.2/locale/ja.js"></script>
-PDBMFΛຊ KB ʹมߋ͢Δ // 日本語Localeに設定する VeeValidate.Validator.localize('ja');
طଘͷΣϒαΠτʹ ຊޠԽ ಋೖ %POF
7VFΞϓϦʹಋೖ͢Δ߹
NBJOKT ʹ JNQPSU͢Δ import ja from 'vee-validate/dist/locale/ja’ import VeeValidate, {
Validator } from 'vee-validate/dist/locale/ja' Validator.localize(‘ja’. ja) IUUQTCBJBOBUHJUIVCJPWFFWBMJEBUFHVJEFMPDBMJ[BUJPOIUNMMPDBMJ[BUJPOBQJ ࢀߟ
7VFΞϓϦʹ ຊޠԽ ಋೖ %POF
ຊޠԽ%&.0 ΣϒαΠτʹಋೖ͢ΔύλʔϯͰಈ࡞֬ೝ
ςϯϓϨʔτ෦ʹ͍ͭͯ
ςϯϓϨʔτ෦ʹ͍ͭͯ <input v-validate="'required|email’” data-vv-as="メールアドレス" name="email" type="text" >
ςϯϓϨʔτ෦ʹ͍ͭͯ <input v-validate="'required|email’” data-vv-as="メールアドレス" name="email" type="text" > σΟϨΫςΟϒ
σΟϨΫςΟϒʹ͍ͭͯ
σΟϨΫςΟϒʹ͍ͭͯ • WWBMJEBUF • όϦσʔγϣϯͷϧʔϧɾෳઃఆՄೳ • લड़ͷ߹ ඞਢ߲ ˍ &NBJMΞυϨεͷόϦσʔγϣϯ
• γϯάϧΫΥʔςʔγϣϯͰғ͏ඞཁ͕͋Δ • EBUBWWBT • Τϥʔจʹ༻ • ҰΧࠃͷ୯७ͳϩʔΧϥΠζʹศར • OBNF • Τϥʔจग़ྗϝιουͷҾʹ͢ • FSSPSGJSTU bFNBJM`
σϑΥϧτͷ όϦσʔγϣϯϧʔϧͷҰ෦Λհ
σϑΥϧτͷόϦσʔγϣϯϧʔϧͷҰ෦Λհ • OVNFSJDʢͷΈʣ • FNBJMʢϝʔϧΞυϨεʣ • JNBHFʢը૾ʣ • NBY@WBMVFʢ࠷ߴʣ •
NJO@WBMVFʢ࠷ʣ • VSMʢ63-ʣ • SFRVJSFEʢඞਢ߲ʣ • ·ͩ·ͩ͋ΔΑʂ IUUQTCBJBOBUHJUIVCJPWFFWBMJEBUFHVJEFSVMFTIUNM ࢀߟ
Γͳ͍όϦσʔγϣϯϧʔϧ ࣗͰ࡞Δ IUUQTCBJBOBUHJUIVCJPWFFWBMJEBUFHVJEFDVTUPNSVMFTIUNM ࢀߟ
ΧελϜόϦσʔγϣϯՃ%&.0 7VFΞϓϦʹಋೖ͢ΔύλʔϯͰಈ࡞֬ೝ
ຊͷσϞ(JU)VCʹ͋͛ͯ·͢ IUUQTHJUIVCDPNOBHBTBXBBBBWTBQQPSPNFFUVQ
ᖒ͕ࢥ͏ϑϩϯτͷ όϦσʔγϣϯͷׂ
ը໘ΛભҠͤͣʹϢʔβʔʹ ਖ਼͍͠ΛೖྗͰ͖Δ6*69Λఏڙ͢Δ͜ͱ
ຊͷ·ͱΊ
ຊͷ·ͱΊ 7FF7BMJEBUF ͷ (FUUJOH4UBSUFEʹهࡌ͞Ε͍ͯΔҰจ $MJFOUTJEFWBMJEBUJPOJTOFWFSBTVCTUJUVUFGPSTFSWFSTJEFWBMJEBUJPO .BLFTVSFUPWBMJEBUFBOZJOQVUGSPNUIFVTFSPOZPVSCBDLFOEBTXFMM Ҿ༻ IUUQTCBJBOBUHJUIVCJPWFFWBMJEBUFHVJEFSVMFTIUNM
ຊͷ·ͱΊ ຊޠ༁ԼهͷΑ͏ʹͳΔʢ(PPHMF༁ʣ ΫϥΠΞϯτଆͷݕূ͕ αʔόʔଆͷݕূͷΘΓʹͳΔ͜ͱ͋Γ·ͤΜɻ όοΫΤϯυͰϢʔβʔ͔ΒͷೖྗΛݕূ͢ΔΑ͏ʹ͍ͯͩ͘͠͞ɻ
ͭ·Γ
ຊͷ·ͱΊ ࠷ऴతʹόοΫΤϯυଆͰόϦσʔγϣϯ͢Δɻ
όοΫΤϯυΤϯδχΞͷօ͞Μ
ޙͷ͜ͱΑΖ͓͘͠Ͷ͕͍͍ͨ͠·͢
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠