Vue meet up sapporo #1 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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠