Form 닀루기

폼(Form)은 μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ—μ„œ κ°€μž₯ 많이 μ‚¬μš©λ˜λŠ” μ½”λ“œ ν˜•μ‹μž…λ‹ˆλ‹€. λ‘œκ·ΈμΈμ΄λ‚˜ μƒν’ˆ 결제 λ“± λͺ¨λ“  곳에 μ‚¬μš©μžμ˜ μž…λ ₯을 μ²˜λ¦¬ν•˜λŠ” 폼이 ν•„μš”ν•©λ‹ˆλ‹€.

Form μ œμž‘ν•˜κΈ°

그럼 뷰둜 κ°„λ‹¨ν•œ 둜그인 폼을 ν•˜λ‚˜ λ§Œλ“€μ–΄λ³΄κ² μŠ΅λ‹ˆλ‹€.

1. HTML νƒœκ·Έ ꡬ성

λ¨Όμ € κ°„λ‹¨ν•œ HTML νƒœκ·ΈλΆ€ν„° μ•„λž˜μ™€ 같이 κ΅¬μ„±ν•©λ‹ˆλ‹€.

<form>
  <div>
    <label for="email">Email</label>
    <input id="email" type="text">
  </div>
  <div>
    <label for="password">Password</label>
    <input id="password" type="password">
  </div>
  <div>
    <button type="submit">Login</button>
  </div>
</form>

2. HTML νƒœκ·Έμ— λ·° 속성 μΆ”κ°€

μœ„μ—μ„œ μž‘μ„±ν•œ 폼의 μ‚¬μš©μž μž…λ ₯을 μ²˜λ¦¬ν•˜λ €λ©΄ μ•„λž˜μ™€ 같이 κ΅¬ν˜„ν•©λ‹ˆλ‹€.

Β 


Β 



Β 






<form v-on:submit.prevent="loginUser">
  <div>
    <label for="email">Email</label>
    <input id="email" type="text" ref="email">
  </div>
  <div>
    <label for="password">Password</label>
    <input id="password" type="password" ref="password">
  </div>
  <div>
    <button type="submit">Login</button>
  </div>
</form>

각 인풋 λ°•μŠ€μ˜ μž…λ ₯ 값을 κ°€μ Έμ˜€κΈ° μœ„ν•΄ ref 속성을 μ‚¬μš©ν•˜μ˜€κ³ , 둜그인 λ²„νŠΌμ„ λˆŒλ €μ„ λ•Œμ˜ 처리λ₯Ό μœ„ν•΄ v-on:submit λ””λ ‰ν‹°λΈŒλ₯Ό μ‚¬μš©ν•˜μ˜€μŠ΅λ‹ˆλ‹€. .preventλŠ” 폼의 기본적인 λ™μž‘μ„ 막기 μœ„ν•œ modifier둜써 ν”νžˆ μ‚¬μš©ν•˜λŠ” event.preventDefault() μ½”λ“œμ™€ 같은 효과λ₯Ό κ°€μ§‘λ‹ˆλ‹€.

3. 둜그인 λ²„νŠΌμ„ λˆŒλ €μ„ λ•Œμ˜ 처리

둜그인 λ²„νŠΌμ„ ν΄λ¦­ν•˜λ©΄ loginUser() λ©”μ„œλ“œκ°€ μ‹€ν–‰λ©λ‹ˆλ‹€.

new Vue({
  methods: {
    loginUser() {
      var email = this.$refs.email.value;
      var password = this.$refs.password.value;
      axios.post('/login', {
        email: email,
        password: password
      });
    }
  }
})

이메일과 λΉ„λ°€λ²ˆν˜Έ 값을 λ°›μ•„ HTTP POST μš”μ²­μ„ λ‚ λ €μ„œ 둜그인 인증 과정을 κ±°μΉ©λ‹ˆλ‹€.

Form Validation

νΌμ—μ„œ κΌ­ ν•΄μ€˜μ•Ό ν•˜λŠ” μž‘μ—…μ€ μ‚¬μš©μžμ˜ μž…λ ₯이 μœ νš¨ν•œμ§€ κ²€μ‚¬ν•˜λŠ” μž‘μ—…μž…λ‹ˆλ‹€. λ·°μ—μ„œλŠ” vee-validate Vuelidate λ“±μ˜ 라이브러리둜 폼의 μœ νš¨μ„± 검사λ₯Ό ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

라이브러리λ₯Ό μ‚¬μš©ν•˜λŠ” 것 이외에도 뷰의 κΈ°λ³Έ 속성을 ν™œμš©ν•΄μ„œ μ•„λž˜μ™€ 같이 κ°„λ‹¨ν•˜κ²Œ μœ νš¨μ„±μ„ 검사할 수 μžˆμŠ΅λ‹ˆλ‹€. μ•„λž˜μ™€ 같은 κ°„λ‹¨ν•œ 인풋 λ°•μŠ€κ°€ μžˆλ‹€κ³  ν•©μ‹œλ‹€.

<div>
  <label for="email">email</label>
  <input id="email" v-model="email" type="text">
</div>
new Vue({
  data: {
    email: ''
  }
})

인풋 λ°•μŠ€μ˜ μž…λ ₯ 값은 λͺ¨λ‘ v-model λ””λ ‰ν‹°λΈŒλ₯Ό μ΄μš©ν•˜μ—¬ email μ΄λΌλŠ” λ·° μΈμŠ€ν„΄μŠ€ 데이터에 μ—°κ²°ν•©λ‹ˆλ‹€.

λ§Œμ•½ 이 인풋 λ°•μŠ€μ— μ΅œμ†Œ 10κΈ€μž 이상 μž…λ ₯ν•΄μ•Ό ν•œλ‹€λ©΄ μ–΄λ–»κ²Œ κ΅¬ν˜„ν•  수 μžˆμ„κΉŒμš”?

<div>
  <label for="email">email</label>
  <input id="email" v-model="email" type="text">
  <small>{{ emailValidation }}</small>
</div>
new Vue({
  data: {
    email: ''
  },
  computed: {
    emailValidation: function() {
      return this.email.length > 10 ? `` : `Length must be over 10`;
    }
  }
})

μœ„μ™€ 같이 μ‚Όν•­ μ—°μ‚°μžλ₯Ό μ΄μš©ν•΄μ„œ κΈ€μžκ°€ 10개 μ΄ν•˜λ©΄ κ²Œμ† κ²½κ³  ν‘œμ‹œκ°€ λœ¨λŠ” computed 속성을 κ΅¬ν˜„ν•˜λ©΄ λ©λ‹ˆλ‹€. 10κΈ€μž μ΄ν•˜μΌ λ•ŒλŠ” 계속 <small> νƒœκ·Έ μ•ˆμ— κΈ€μžμ˜ 길이가 10 이상이어야 ν•œλ‹€λŠ” μ•ˆλ‚΄ λ¬Έμžκ°€ ν‘œμ‹œλ©λ‹ˆλ‹€.