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
KATA
mclloyd
32
14k
Code Reviewing Like a Champion
maltzj
525
40k
Side Projects
sachag
455
43k
Balancing Empowerment & Direction
lara
3
620
A Tale of Four Properties
chriscoyier
160
23k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Being A Developer After 40
akosma
90
590k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
850
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
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༁ʣ ΫϥΠΞϯτଆͷݕূ͕ αʔόʔଆͷݕূͷΘΓʹͳΔ͜ͱ͋Γ·ͤΜɻ όοΫΤϯυͰϢʔβʔ͔ΒͷೖྗΛݕূ͢ΔΑ͏ʹ͍ͯͩ͘͠͞ɻ
ͭ·Γ
ຊͷ·ͱΊ ࠷ऴతʹόοΫΤϯυଆͰόϦσʔγϣϯ͢Δɻ
όοΫΤϯυΤϯδχΞͷօ͞Μ
ޙͷ͜ͱΑΖ͓͘͠Ͷ͕͍͍ͨ͠·͢
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠