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
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Producing Creativity
orderedlist
PRO
346
40k
Building Adaptive Systems
keathley
43
2.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
BBQ
matthewcrist
89
9.7k
Speed Design
sergeychernyshev
32
1k
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༁ʣ ΫϥΠΞϯτଆͷݕূ͕ αʔόʔଆͷݕূͷΘΓʹͳΔ͜ͱ͋Γ·ͤΜɻ όοΫΤϯυͰϢʔβʔ͔ΒͷೖྗΛݕূ͢ΔΑ͏ʹ͍ͯͩ͘͠͞ɻ
ͭ·Γ
ຊͷ·ͱΊ ࠷ऴతʹόοΫΤϯυଆͰόϦσʔγϣϯ͢Δɻ
όοΫΤϯυΤϯδχΞͷօ͞Μ
ޙͷ͜ͱΑΖ͓͘͠Ͷ͕͍͍ͨ͠·͢
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠