Vue meet up sapporo #1 VeeValidateの紹介

フォーム作成時にお世話になったVeeValidate を紹介します

Transcript

1. ϑΥʔϜ࡞੒࣌ʹ ͓ੈ࿩ʹͳͬͨ 7FF7BMJEBUF
   Λ঺հ͠·͢  WTBQQPSP .FFU6Q 
2. • ௕ᖒ ݡʢͳ͕͞Θ ͞ͱ͠ʣ • גࣜձࣾύϯη • ϑϩϯτΤϯυΤϯδχΞ • ຊ೔ਓੜॳ-5ʢ-5ಐఃʣ • 7VFKTྺ ϲ݄͘Β͍ • 7VF 
   /VYU ΋͘΋͘ձ΍ͬͯ·͢ • ޷͖ͳ΋ͷ • ΨϯμϜγϦʔζ • ϚΫϩεγϦʔζ • ՆϑΣε • ͓ञ • 7VFKT OBHBTBXBBBB
3. 7FF7BMJEBUF
   ͱ͸
4. 7FF7BMJEBUF
   ެࣜυΩϡϝϯτʹΑΔͱʜ • 5FNQMBUF
   #BTFE
   7BMJEBUJPO
   'SBNFXPSL
   GPS
   7VFKT • ೔ຊޠ༁ʣ7VFKT༻ͷςϯϓϨʔτϕʔεͷݕূϑϨʔϜϫʔΫ • ࣗ෼ղऍʣϑΥʔϜͷόϦσʔγϣϯΛ͍͍ײ͡ʹ΍ͬͯ͘ΕΔϥΠϒϥϦ
5. 7FF7BMJEBUF
   ʹ͓ੈ࿩ʹͳͬͨܦҢ • ϑϩϯτͰ΋όϦσʔγϣϯ͢Δཁ݅ͩͬͨ • 7VF 7BMJEBUJPO
   Ͱάάͬͯ࠷ॳͷํʹग़͖ͯͨ • υΩϡϝϯτݟΔײ͡ಋೖָͦ͏ͩͬͨ • άάͬͨ݁Ռɺઌਓͷ஌ܙΛआΓΕͦ͏ͳ͘Β͍ʢ೔ຊޠͷʣهࣄ͕ଟ͔ͬͨ
6. ࠾༻ͩʂ
7. 7FF7BMJEBUF
   ಋೖํ๏
8. طଘͷ΢ΣϒαΠτʹಋೖ͢Δ৔߹
9. ࣍ͷίʔυΛ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 ࢀߟ
10. طଘͷ΢ΣϒαΠτʹ 7FF7BMJEBUF ಋೖ %POF
11. 7VFΞϓϦʹಋೖ͢Δ৔߹
12. OQN PS
    ZBSO
    ͰΠϯετʔϧ $ npm install vee-validate --save or $ yarn add vee-validate IUUQTCBJBOBUHJUIVCJPWFFWBMJEBUFHVJEFHFUUJOHTUBSUFEIUNMJOTUBMMBUJPO ࢀߟ
13. NBJOKT ʹ JNQPSU
    ͢Δ import VeeValidate from 'vee-validate' Vue.use(VeeValidate) IUUQTCBJBOBUHJUIVCJPWFFWBMJEBUFHVJEFHFUUJOHTUBSUFEIUNMVTBHF ࢀߟ
14. 7VFΞϓϦʹ 7FF7BMJEBUF ಋೖ %POF
15. %&.0 ΢ΣϒαΠτʹಋೖ͢ΔύλʔϯͰಈ࡞֬ೝ
16. Ͷʁ؆୯Ͱ͠ΐʁ
17. ͔͠͠ Τϥʔϝοηʔδ͕ӳޠ
18. ೔ຊޠͷΤϥʔϝοηʔδΛ ද͍ࣔͤͨ͞
19. طଘͷ΢ΣϒαΠτʹಋೖ͢Δ৔߹
20. ೔ຊޠͷ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>
21. -PDBMFΛ೔ຊ
    KB
    ʹมߋ͢Δ // 日本語Localeに設定する VeeValidate.Validator.localize('ja');
22. طଘͷ΢ΣϒαΠτʹ ೔ຊޠԽ ಋೖ %POF
23. 7VFΞϓϦʹಋೖ͢Δ৔߹
24. 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 ࢀߟ
25. 7VFΞϓϦʹ ೔ຊޠԽ ಋೖ %POF
26. ೔ຊޠԽ%&.0 ΢ΣϒαΠτʹಋೖ͢ΔύλʔϯͰಈ࡞֬ೝ
27. ςϯϓϨʔτ෦෼ʹ͍ͭͯ
28. ςϯϓϨʔτ෦෼ʹ͍ͭͯ <input v-validate="'required|email’” data-vv-as="メールアドレス" name="email" type="text" >
29. ςϯϓϨʔτ෦෼ʹ͍ͭͯ <input v-validate="'required|email’” data-vv-as="メールアドレス" name="email" type="text" > σΟϨΫςΟϒ
30. σΟϨΫςΟϒʹ͍ͭͯ
31. σΟϨΫςΟϒʹ͍ͭͯ • WWBMJEBUF • όϦσʔγϣϯͷϧʔϧɾෳ਺ઃఆՄೳ • લड़ͷ৔߹ ඞਢ߲໨ ˍ &NBJMΞυϨεͷόϦσʔγϣϯ • γϯάϧΫΥʔςʔγϣϯͰғ͏ඞཁ͕͋Δ • EBUBWWBT • Τϥʔจʹ࢖༻ • ҰΧࠃͷ୯७ͳϩʔΧϥΠζʹศར • OBNF • Τϥʔจग़ྗϝιουͷҾ਺ʹ౉͢ • FSSPSGJSTU bFNBJM`
32. σϑΥϧτͷ όϦσʔγϣϯϧʔϧͷҰ෦Λ঺հ
33. σϑΥϧτͷόϦσʔγϣϯϧʔϧͷҰ෦Λ঺հ • OVNFSJD
    ʢ਺஋ͷΈʣ • FNBJM
    ʢϝʔϧΞυϨεʣ • JNBHF
    ʢը૾ʣ • NBY@WBMVFʢ࠷ߴ஋ʣ • NJO@WBMVFʢ࠷௿஋ʣ • VSMʢ63-ʣ • SFRVJSFE
    ʢඞਢ߲໨ʣ • ·ͩ·ͩ͋ΔΑʂ IUUQTCBJBOBUHJUIVCJPWFFWBMJEBUFHVJEFSVMFTIUNM ࢀߟ
34. ଍Γͳ͍όϦσʔγϣϯϧʔϧ͸ ࣗ෼Ͱ࡞Δ IUUQTCBJBOBUHJUIVCJPWFFWBMJEBUFHVJEFDVTUPNSVMFTIUNM ࢀߟ
35. ΧελϜόϦσʔγϣϯ௥Ճ%&.0 7VFΞϓϦʹಋೖ͢ΔύλʔϯͰಈ࡞֬ೝ
36. ຊ೔ͷσϞ͸(JU)VCʹ͋͛ͯ·͢ IUUQTHJUIVCDPNOBHBTBXBBBBWTBQQPSPNFFUVQ
37. ௕ᖒ͕ࢥ͏ϑϩϯτͷ όϦσʔγϣϯͷ໾ׂ
38. ը໘ΛભҠͤͣʹϢʔβʔʹ ਖ਼͍͠஋ΛೖྗͰ͖Δ6*69Λఏڙ͢Δ͜ͱ
39. ຊ೔ͷ·ͱΊ
40. ຊ೔ͷ·ͱΊ 7FF7BMJEBUF ͷ (FUUJOH
    4UBSUFE
    ʹهࡌ͞Ε͍ͯΔҰจ $MJFOUTJEF
    WBMJEBUJPO
    JT
    OFWFS
    B
    TVCTUJUVUF
    GPS
    TFSWFSTJEF
    WBMJEBUJPO .BLF
    TVSF
    UP
    WBMJEBUF
    BOZ
    JOQVU
    GSPN
    UIF
    VTFS
    PO
    ZPVS
    CBDLFOE
    BT
    XFMM Ҿ༻ IUUQTCBJBOBUHJUIVCJPWFFWBMJEBUFHVJEFSVMFTIUNM
41. ຊ೔ͷ·ͱΊ ೔ຊޠ༁͸ԼهͷΑ͏ʹͳΔʢ(PPHMF຋༁ʣ ΫϥΠΞϯτଆͷݕূ͕ αʔόʔଆͷݕূͷ୅ΘΓʹͳΔ͜ͱ͸͋Γ·ͤΜɻ όοΫΤϯυͰ΋Ϣʔβʔ͔ΒͷೖྗΛݕূ͢ΔΑ͏ʹ͍ͯͩ͘͠͞ɻ
42. ͭ·Γ
43. ຊ೔ͷ·ͱΊ ࠷ऴతʹ͸όοΫΤϯυଆͰόϦσʔγϣϯ͢Δɻ
44. όοΫΤϯυΤϯδχΞͷօ͞Μ
45. ޙͷ͜ͱ͸ΑΖ͓͘͠Ͷ͕͍͍ͨ͠·͢
46. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠