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
590
CSS Transform Simulator を Vue.js で 作った話
nagasawaaaa
1
570
gulpをv3系から v4系にアップデートした話
nagasawaaaa
1
470
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Building Adaptive Systems
keathley
43
2.6k
Making Projects Easy
brettharned
116
6.3k
The Pragmatic Product Professional
lauravandoore
35
6.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Done Done
chrislema
184
16k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Scaling GitHub
holman
459
140k
Embracing the Ebb and Flow
colly
86
4.7k
Automating Front-end Workflow
addyosmani
1370
200k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
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༁ʣ ΫϥΠΞϯτଆͷݕূ͕ αʔόʔଆͷݕূͷΘΓʹͳΔ͜ͱ͋Γ·ͤΜɻ όοΫΤϯυͰϢʔβʔ͔ΒͷೖྗΛݕূ͢ΔΑ͏ʹ͍ͯͩ͘͠͞ɻ
ͭ·Γ
ຊͷ·ͱΊ ࠷ऴతʹόοΫΤϯυଆͰόϦσʔγϣϯ͢Δɻ
όοΫΤϯυΤϯδχΞͷօ͞Μ
ޙͷ͜ͱΑΖ͓͘͠Ͷ͕͍͍ͨ͠·͢
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠