개요

Nuxt.js를 사용해 form에 프런트측에서 밸리데이션을 붙여 갑니다.

전제 지식

html, css, Vue.js의 기본 지식

프로젝트 만들기

이번에는 데스크톱에 만들겠습니다.

cd ~/Desctop
npx create-nuxt-app validate
npm run dev

이쪽이 시작되면 환경 구축은 성공입니다.

 touch pages/form.vue

이번에는 다음과 같은 양식을 작성해 갑니다.


품목
밸리데이션
밸리데이션


이름
반드시 필요
8자 이내

회 사 명
반드시 필요
　



pages/form.vue

<template>
  <form>
    <label>名前</label>
    <input type="text" v-model="form.name.val">
    <p>{{form.name.val}}</p>
    <label>会社名</label>
    <input type="text" v-model="form.company.val">
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: {
          label: "名前",
          val: null,
          errorMessage: null
        },
        company: {
          label: "会社名",
          val: null,
          errorMessage: null
        },
      },
    }
  },
}
</script>

우선은 이런 느낌에 간단하게 기술해 갑니다.
설명하면 우선 적당하게 양식을 작성합니다.
스크립트 태그의 내용은
data로 form의 데이터를 작성해, 그 안에 name와 company를 만들고 있습니다.

v-model에서 각 입력된 값을 수신 중입니다.
label은 각각의 input의 이름을 선택해 둡니다.
val과 errorMessage를 만들고 기본값을 null로 설정합니다.

유효성 검사를 추가합니다.

밸리데이션의 메소드를 추가해 갑니다.

pages/form.vue

<script>
export default {
  data() {
    return {
      form: {
        name: {
          label: "名前",
          val: null,
          errorMessage: null
        },
        company: {
          label: "会社名",
          val: null,
          errorMessage: null
        },
      },
    }
  },
  methods: {
    validateName() {
      const { name } = this.form
      const maxLength = 8

      if(!name.val) {
        name.errorMessage = `${name.label}は必須項目です`
        return
      }

      if (name.val.length > maxLength) {
        name.errorMessage = `${name.label}は${maxLength}以内で入力してください`
        return
      }
      name.errorMessage = null
    },
    validateCompany() {
      const { company } = this.form

      if (!company.val) {
        company.errorMessage = `${company.label}は必須項目です`
        return
      }
      company.errorMessage = null
    },
    onSubmit() {
      this.validateName()
      this.validateCompany()
    }
  }
}
</script>

script 태그를 여기로 변경합니다!
설명합니다.
밸리데이션
validateName, validateCompany 메서드에서 추가합니다.

const {name} = this.form으로 먼저 할당하십시오.
8자 이내의 설정이므로 maxLength를 8로 설정합니다.
그리고는 if분으로 조건을 내려 갈 뿐입니다만 ,.
반드시 return으로 처리를 끝내는 것을 잊지 마세요!

마지막으로 onSubmit에서 이러한 메소드를 호출합니다.
그리고는 어느 타이밍에 에라~메세지를 내는지 스스로 결정할 뿐입니다.

오류 ~ 메시지 응답

이번에는 에라 ~ 메시지를 내는 것을 목표로하고 있기 때문에, 디자인은 거의하지 않습니다.

pages/form.vue

<template>
<div>
  <form @submit.prevent="onSubmit">
    <label>名前</label>
    <input @keyup="validateName" :class="{'border-red':form.name.errorMessage}" type="text" v-model="form.name.val">
    <label>会社名</label>
    <input @keyup="validateCompany" :class="{'border-red':form.company.errorMessage}" type="text" v-model="form.company.val">
    <input type="submit">
  </form>
  <p class="errorMessage">{{form.name.errorMessage}}</p>
  <p class="errorMessage">{{form.company.errorMessage}}</p>
</div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: {
          label: "名前",
          val: null,
          errorMessage: null
        },
        company: {
          label: "会社名",
          val: null,
          errorMessage: null
        },
      },
    }
  },
  methods: {
    validateName() {
      const { name } = this.form
      const maxLength = 8

      if(!name.val) {
        name.errorMessage = `${name.label}は必須項目です`
        return
      }

      if (name.val.length > maxLength) {
        name.errorMessage = `${name.label}は${maxLength}以内で入力してください`
        return
      }
      name.errorMessage = null
    },
    validateCompany() {
      const { company } = this.form

      if (!company.val) {
        company.errorMessage = `${company.label}は必須項目です`
        return
      }
      company.errorMessage = null
    },
    onSubmit() {
      this.validateName()
      this.validateCompany()
    }
  }
}
</script>

<style>
.errorMessage {
  color: red;
}
.border-red {
  border: 1px solid red;
}
</style>

여기 최종 코드입니다.

주목해야 할 점만 설명하겠습니다.
@submit.prevent="onSubmit"에서 먼저 유효성 검사를 호출합니다.
@submith 그럼 v-on:submit의 약기법으로, 즉 폼을 제출하는 타이밍에 밸리데이션을 확인해!
라는 의미가 됩니다.
prevent는 submit의 이벤트 한정자로 submit의 움직임을 멈출 수 있습니다.
에라 ~ 메시지가 나왔는데 보내지면 의미가 없기 때문에

submit.prevent는 자주 사용하므로 기억하십시오.

그리고는 @keyup 의 타이밍에서 각각의 밸리데이션을 확인하고 있습니다.
:class는 v-bind:class의 약어입니다.
{클래스 : A}
A가 true이면 클래스를 적용한다는 의미입니다.

즉 에라~메세지가 있으면 style를 적용하는군요.
border: 1px solid red가 적용됩니다.





수고하셨습니다! !