VeeValidate를 사용하여 Vue.js에서 회원 등록의 유효성 검사를 시도했습니다.

Vue.js에서 회원 등록형 사이트를 만들고 있습니다만, VeeValidate를 사용하면 프런트 사이드에서 간단히 밸리데이션을 할 수 있었으므로 소개하겠습니다.

VeeValidate
htps : // 기주 b. 코 m / ぉ 가라 tm / ゔ ぇ ゔ ぃ

환경 정보

vue: 2.6.10

vee-validate: 2.2.10

완성 이미지

사전 준비

VeeValidate 설치

npm install vee-validate --save

VeeValidate를 Vue로 호출

Signup.vue

import Vue from 'vue';
import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);

사용법

기본 유형은 다음과 같습니다.

Signup.vue

<form>
  <div class="form-group">
    <input
      type="email"
      placeholder="email"
      class="form-control"
      v-model="email"
      name="email"
      v-validate="'required|email'"
      data-vv-as="メールアドレス"
     >
    <div class="form-control-feedback" v-show="errors.has('email')">
      <p class="alert alert-danger">{{ errors.first('email') }}</p>
    </div>
  </div>

  <div class="form-group">
    <button type="button" class="btn btn-primary" v-on:click="submit">登録</button>
  </div>
</form>

v-validate에 유효성 검증 규칙을 작성합니다.
여러 개를 선택할 때는 |로 구분하십시오.

<input v-validate="'required|email'" name="field" type="text">

유효성 검사 규칙

규칙
기능


required
입력 필수

email
이메일 주소 형식

numeric
반각 수치만

min
최소 입력 문자 수

최대
최대 입력 문자 수

오류 메시지

다음은 오류 메시지의 표시 부분입니다.
input 폼의 name 속성을 사용합니다.

<div class="form-control-feedback" v-show="errors.has('email')">
  <p class="alert alert-danger">{{ errors.first('email') }}</p>
</div>

오류 메시지 일본어

기본적으로 오류 메시지의 내용은 영어로되어 있으므로 일본어로 다시해야합니다.

app.js

// 日本語ファイルを読み込み
import ja from 'vee-validate/dist/locale/ja'

// vee-validateの日本語
Validator.localize('ja', ja);
Vue.use(VeeValidate, { locale: ja });

data-vv-as=""안에 쓴 일본어가 표시됩니다.

Signup.vue

<div class="form-group">
  <input
    type="email"
    placeholder="email"
    class="form-control"
    v-model="email"
    name="email"
    v-validate="'required|email'"
    data-vv-as="メールアドレス"
   >
  <div class="form-control-feedback" v-show="errors.has('email')">
    <p class="alert alert-danger">{{ errors.first('email') }}</p>
  </div>
</div>

버튼을 누르면 유효성 검사

버튼을 구현합니다.
button type="submit"로 하면 바리데이트가 잘 달리지 않기 때문에 주의입니다.

Signup.js

<button type="button" class="btn btn-primary" v-on:click="submit">登録</button>

유효성 검사가 없을 때의 처리를 이하와 같이 기술해 갑니다.

Signup.vue

methods: {
  submit: function() {
    this.$validator.validateAll().then(async result => {
      try {
        if (result) {
          //バリデートがないときの処理 (成功したとき)
          const res = await axios.post("/signup", {
            name: this.name,
            email: this.email,
            password: this.password
          });
        }
      } catch (err) {
        console.log(err);
      }
    });
  }
}

샘플 코드

template 부분

Signup.vue

<form>
  <div class="form-group">
    <input
      type="text"
      placeholder="username"
      class="form-control"
      v-model="name"
      name="name"
      v-validate="'required|max:10'"
      data-vv-as="ユーザーネーム"
    >
    <div class="form-control-feedback" v-show="errors.has('name')">
      <p class="alert alert-danger">{{ errors.first('name') }}</p>
    </div>
  </div>
  <div class="form-group">
    <input
      type="email"
      placeholder="email"
      class="form-control"
      v-model="email"
      name="email"
      v-validate="'required|email'"
      　data-vv-as="メールアドレス"
    >
    <div class="form-control-feedback" v-show="errors.has('email')">
      <p class="alert alert-danger">{{ errors.first('email') }}</p>
    </div>
  </div>
  <div class="form-group">
    <input
      type="password"
      placeholder="password"
      class="form-control"
      v-model="password"
      name="password"
      v-validate="'required|min:4|max:20'"
      data-vv-as="パスワード"
    >
    <div class="form-control-feedback" v-show="errors.has('password')">
      <p class="alert alert-danger">{{ errors.first('password') }}</p>
    </div>
  </div>
  <div class="form-group">
    <button type="button" class="btn btn-primary" v-on:click="submit">登録</button>
  </div>
</form>

script 부분

Signup.js

<script>
import axios from "axios";

export default {
  data() {
    return {
      name: "",
      email: "",
      password: ""
    };
  },
  methods: {
    submit: function() {
      this.$validator.validateAll().then(async result => {
        try {
          if (result) {
            const res = await axios.post("/signup", {
              name: this.name,
              email: this.email,
              password: this.password
            });
          }
        } catch (err) {
          console.log(err);
        }
      });
    }
  }
};
</script>

완성 이미지(재게재)

bootstrap으로 조금 멋지다.
여러분도 VeeValidate를 사용해 밸리데이션을 해 보세요! 편리합니다.

(추기)
서버 측에서의 validation은 express validator에서 실시했습니다.
h tps : // 에 xp 랏 s ゔ ぁぃ라고 r. 기주 b. 이오/도 cs/