Vue 양식 자습서 - 사용자 입력 캡처 및 유효성 검사

Vue.js로 사용자 입력을 처리하는 것은 상당히 간단합니다. 상기의 도움으로 V 모델  지침 및 양식 유효성 검사에 대한 몇 가지 VUE 검증 플러그인 중 하나.

우리가 만들고있는 앱은 하나의 텍스트 요소 만 포함 할 것이지만 Vue로 양식 입력 필드를보다 잘 이해할 수 있도록 잠깐 다른 양식 요소를 살펴 보겠습니다.

Vue V- 모델 지시문

사용자 입력을 캡처해야하는 경우  양방향 데이터 바인딩을 가능하게하는 양식 입력 및 텍스트 영역에 v-model 지시문을 사용할 수 있습니다 . 사용하기가 매우 쉽습니다.

/src/components/Skills.vue  파일을 열고 다음을 포함하도록 템플릿 섹션을 조정하십시오.

<template>
  <div class="container">

    <!-- Add these two lines: -->
    <input type="text" placeholder="Enter a skill you have.." v-model="skill">
    {{ skill }}

    <!-- Remaining HTML removed for brevity -->

그런 다음 <script>  섹션에서 참조 된 스킬  속성을 데이터 섹션에 추가합니다 .

  data() {
    return {
      skill: '',  // Add this line
      skills: [
          { "skill": "Vue.js" },
          { "skill": "Frontend Developer" }
      ]
    }
  },

우리가이 파일을 보았을 때, CSS 섹션의 입력 버튼을 빠르게 스타일링하자. 이 룰셋을 추가하십시오.

  input {
    width: calc(100% - 40px);
    border: 0;
    padding: 20px;
    font-size: 1.3em;
    background-color: #323333;
    color: #687F7F;
  }

파일을 저장하고 입력 필드에 입력을 시작하십시오.  입력 필드 아래에 보간 된 스킬 속성은 사용자가 입력 한대로 사용자 입력을 캡처 한 것을 보여줍니다.

이것은 우리에게는별로 도움이되지 않으므로 양식을 제출할 때 사용자 입력을 캡처합시다.

Vue에서 양식 제출

Skills.vue  파일 의 템플릿을 다음과 같이 수정하십시오 .

    <form @submit.prevent="addSkill">
      <input type="text" placeholder="Enter a skill you have.."  v-model="skill">
    </form>

여기서는 양식  요소로 입력 내용을 싸는 것 입니다. 우리는 @ submit.prevent를 사용 하여 폼을 제출하고 페이지를 다시로드하지 못하게하고 addSkill 이라는 메서드에 바인딩합니다 .

addSkill  을 컴포넌트 로직에서 메소드로 정의 해 봅시다 .

export default {
  name: 'Skills',
  data() {
    // Removed for brevity
  },

  // Add this section:
  methods : {
      addSkill(){
          this.skills.push({skill: this.skill});
          this.skill = '';
      }
  }
}

여기, 우리가하고있는 모든라는 방법을 정의하는 addSkill를 () 및이 호출 할 때, 우리는에 밀어 기술  에 정의 배열 (데이터)  섹션, 그리고 우리가 재설정하여 입력을 취소 기술  빈 문자열로 속성을 .

스킬을 입력하고 Enter 키를 누르십시오. 입력 필드 아래에 목록에 추가됩니다.

여러 사용자 입력 처리

양식에는 현재 텍스트 입력 만 포함되지만 데모 목적으로는 확인란을 추가합니다.

다음과 같이 템플리트를 수정하십시오.

    <form @submit.prevent="addSkill">
      <input type="text" placeholder="Enter a skill you have.."  v-model="skill">

      <!-- Add this line -->
      <input type="checkbox" id="checkbox" v-model="checked">

    </form>

에서 스크립트  섹션 추가 :

    return {
      checked: false,   // Add this, it sets the checked property to false
      skill: '',

그런 다음 addSkill ()  메소드를 업데이트하십시오 .

      addSkill(){
          this.skills.push({skill: this.skill});
          this.skill = '';
          console.log('The checkbox value is: '+this.checked)  // Add this
      }

확인란을 선택하고 입력에 문자열을 입력하고 Enter 키를 누르면 콘솔에 확인란이 선택 되었음이 표시됩니다.

이 확인란을 필요로하지 않으므로 마지막 몇 단계에서 백업하여 확인란 및 관련 코드를 제거하십시오.

Vue 양식 유효성 검사

npm이나 원사를 통해 설치할 수있는 몇 가지 Vue 양식 유효성 검사 패키지가 있습니다. 널리 사용되는 검증 패키지는 VeeValidate 입니다.

VeeValidate는 많은 옵션이있는 강력한 플러그인이지만 몇 가지 기본 옵션을 사용하여 텍스트 입력이 올바르게 적용되는지 확인합니다.

먼저, 원사를 사용하여 콘솔에 설치합니다.

> yarn add vee-validate

다음으로 /src/main.js  파일 에 추가해야 합니다.

import Vue from 'vue'
import App from './App.vue'

import VeeValidate from 'vee-validate';  // Add this
Vue.use(VeeValidate);  // Add this

// Other code removed for brevity

큰! 이제 사용할 준비가되었습니다.

그런 다음 /src/components/Skills.vue 에서 템플릿을 수정합니다.

<input type="text" placeholder="Enter a skill you have.." v-model="skill" v-validate="'min:5'" name="skill">
<p class="alert" v-if="errors.has('skill')">{{ errors.first('skill') }}</p>

여기에 v-validate  를 min : 5로 설정  하고 입력  에 VeeValidate에 필요한 이름 을 지정했습니다.

다음  으로 v-if  지시문을 사용하여 새로운 p 요소를 추가합니다 .  VeeValidate에서 생성 하는 오류 개체에 스킬 오류가 있으면 보간을 통해 오류를 표시합니다.

이것을하기 전에, .alert를 위한 빠른 CSS 규칙 세트를 추가해 보겠습니다 .

  .alert {
    background: #fdf2ce;
    font-weight: bold;
    display: inline-block;
    padding: 5px;
    margin-top: -20px;
  }

이것을 저장하고 5 자 미만으로 입력하면 다음과 같이 표시됩니다.

큰. 하지만 한 가지 문제가 있습니다. 입력 한 글자 수가 5 자 미만인 경우에도 양식을 제출할 수 있습니다.

addSkill ()  메서드를 수정하여 해결할 수 있습니다 .

      addSkill() {
        this.$validator.validateAll().then((result) => {
          if (result) {
            this.skills.push({skill: this.skill});
            this.skill = '';
          } else {
            console.log('Not valid');
          }
        })
      }

.