Save 37% off PRO during our Black Friday Sale! »

Vue meet up sapporo #1 VeeValidateの紹介

199eea10363d8ce292adf0d3124704b9?s=47 nagasawaaaa
April 19, 2019
160

Vue meet up sapporo #1 VeeValidateの紹介

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

199eea10363d8ce292adf0d3124704b9?s=128

nagasawaaaa

April 19, 2019
Tweet

Transcript

  1. ϑΥʔϜ࡞੒࣌ʹ ͓ੈ࿩ʹͳͬͨ 7FF7BMJEBUFΛ঺հ͠·͢  WTBQQPSP .FFU6Q 

  2. • ௕ᖒ ݡʢͳ͕͞Θ ͞ͱ͠ʣ • גࣜձࣾύϯη • ϑϩϯτΤϯυΤϯδχΞ • ຊ೔ਓੜॳ-5ʢ-5ಐఃʣ

    • 7VFKTྺ ϲ݄͘Β͍ • 7VF /VYU ΋͘΋͘ձ΍ͬͯ·͢ • ޷͖ͳ΋ͷ • ΨϯμϜγϦʔζ • ϚΫϩεγϦʔζ • ՆϑΣε • ͓ञ • 7VFKT OBHBTBXBBBB
  3. 7FF7BMJEBUFͱ͸

  4. 7FF7BMJEBUFެࣜυΩϡϝϯτʹΑΔͱʜ • 5FNQMBUF#BTFE7BMJEBUJPO'SBNFXPSLGPS7VFKT • ೔ຊޠ༁ʣ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 PSZBSOͰΠϯετʔϧ $ 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 ͷ (FUUJOH4UBSUFEʹهࡌ͞Ε͍ͯΔҰจ $MJFOUTJEFWBMJEBUJPOJTOFWFSBTVCTUJUVUFGPSTFSWFSTJEFWBMJEBUJPO .BLFTVSFUPWBMJEBUFBOZJOQVUGSPNUIFVTFSPOZPVSCBDLFOEBTXFMM Ҿ༻ IUUQTCBJBOBUHJUIVCJPWFFWBMJEBUFHVJEFSVMFTIUNM

  41. ຊ೔ͷ·ͱΊ ೔ຊޠ༁͸ԼهͷΑ͏ʹͳΔʢ(PPHMF຋༁ʣ ΫϥΠΞϯτଆͷݕূ͕ αʔόʔଆͷݕূͷ୅ΘΓʹͳΔ͜ͱ͸͋Γ·ͤΜɻ όοΫΤϯυͰ΋Ϣʔβʔ͔ΒͷೖྗΛݕূ͢ΔΑ͏ʹ͍ͯͩ͘͠͞ɻ

  42. ͭ·Γ

  43. ຊ೔ͷ·ͱΊ ࠷ऴతʹ͸όοΫΤϯυଆͰόϦσʔγϣϯ͢Δɻ

  44. όοΫΤϯυΤϯδχΞͷօ͞Μ

  45. ޙͷ͜ͱ͸ΑΖ͓͘͠Ͷ͕͍͍ͨ͠·͢

  46. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠