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
390
Vue meet up sapporo #1 VeeValidateの紹介
フォーム作成時にお世話になったVeeValidate を紹介します
nagasawaaaa
April 19, 2019
Tweet
Share
More Decks by nagasawaaaa
See All by nagasawaaaa
勉強会を開いてよかった話
nagasawaaaa
0
610
CSS Transform Simulator を Vue.js で 作った話
nagasawaaaa
1
590
gulpをv3系から v4系にアップデートした話
nagasawaaaa
1
470
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.2k
Visualization
eitanlees
148
16k
Embracing the Ebb and Flow
colly
87
4.8k
How GitHub (no longer) Works
holman
315
140k
Done Done
chrislema
185
16k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
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༁ʣ ΫϥΠΞϯτଆͷݕূ͕ αʔόʔଆͷݕূͷΘΓʹͳΔ͜ͱ͋Γ·ͤΜɻ όοΫΤϯυͰϢʔβʔ͔ΒͷೖྗΛݕূ͢ΔΑ͏ʹ͍ͯͩ͘͠͞ɻ
ͭ·Γ
ຊͷ·ͱΊ ࠷ऴతʹόοΫΤϯυଆͰόϦσʔγϣϯ͢Δɻ
όοΫΤϯυΤϯδχΞͷօ͞Μ
ޙͷ͜ͱΑΖ͓͘͠Ͷ͕͍͍ͨ͠·͢
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠