이것은 유효성 검사를 위해 Vue.js , Tailwind CSS 및 VeeValidate을 사용하여 유효성 검사가 있는 간단한 로그인 양식을 만드는 방법에 대한 2부 중 2부입니다.

내 저장소Github에서 예제 앱을 복제할 수 있습니다.

1부 링크

2부: 양식 만들기 및 유효성 검사 추가

이 파트에서는 ​​양식을 만들고 프런트엔드 양식 유효성 검사를 위해 Veevalidate를 연결하는 방법을 살펴보겠습니다.

양식 만들기

Login.vue 폴더에 새 vue 구성 요소src/views를 만듭니다. 아래 명령을 사용할 수 있습니다

touch src/views/Login.vue

아래 코드를 파일에 붙여넣습니다.

<template>
  <div class="flex justify-center items-center mt-52">
    <div class="w-full max-w-xs">
      <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
        <div class="identity-input mb-4">
          <label
            for="identity"
            class="block text-gray-700 text-sm font-bold mb-2"
          >
            Email</label
          >
          <input
            id="identity"
            class="shadow appearance-none borderrounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
            type="text"
            placeholder="Email"
            aria-describedby="emailHelp"
            v-model="email"
          />
          <span class="text-xs text-red-700" id="emailHelp"></span>
        </div>

        <div class="password-input mb-6">
          <label
            for="identity"
            class="block text-gray-700 text-sm font-bold mb-2"
            >Password</label
          >

          <input
            aria-describedby="passwordHelp"
            v-model="password"

            class="shadow appearance-none borderrounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
            id="password"
            type="password"
            placeholder="*******"
          />

          <span class="text-xs text-red-700" id="passwordHelp"></span>
        </div>

        <div class="flex items-center justify-between">
          <button
            class="bg-blue-600 hover:bg-black text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
            type="submit"
          >
            Sign In
          </button>
          <a
            class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800"
            href="#"
          >
            Forgot Password?
          </a>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      email: "",
      password: "",
    };
  },
  methods: {
    login() {
      console.log("logging in");
    },
  },
};
</script>

로그인 경로 설정

routes/index.js 파일에 아래를 추가하십시오.

...
import Login from '../views/Login.vue'

...

const routes = [
...,
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
]
...

App.vue 파일에 추가

...
   <router-link
            to="/link"
            class="block ml-4 mt-4
            lg:inline-block lg:mt-0 text-blue-200
            hover:text-white"
            >Login</router-link>

...

이 위치에서 http://localhost:8080/#/login로 이동하면 다음과 같이 표시됩니다.

VeeValidate 설정

유효성 검사를 추가하려면 VeeValidate를 설치해야 합니다.

npm install vee-validate --save

설치가 완료되면 main.js 추가

...
import {extend,ValidationObserver, ValidationProvider} from 'vee-validate';
import * as rules from 'vee-validate/dist/rules';


Vue.component('ValidationObserver', ValidationObserver);
Vue.component('ValidationProvider', ValidationProvider);

Object.keys(rules).forEach(rule => {
  extend(rule, rules[rule]);
});
...

extend vee-validate 함수 및 구성 요소에서 전역적으로 사용할 규칙을 더 추가할 수 있습니다.
ValidationObserver는 양식을 래핑하고 그 아래에 중첩된 모든 필드에 대해 집계된 유효성 검사 상태를 제공하는 구성 요소입니다.
ValidationProvider 구성 요소는 입력을 래핑하고 유효성 검사 상태를 제공하는 구성 요소입니다.

그런 다음 import * as rules from 'vee-validate/dist/rules';를 사용하여 모든 기본 규칙을 가져오고 Object.keys(rules).forEach 함수를 사용하여 이를 반복합니다.

이를 통해 우리는 마법을 실현할 수 있습니다.

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

이제 양식 구성 요소를 ValidationObserver 구성 요소로 래핑해야 합니다.

...
 <ValidationObserver ref="loginForm">
<form >
...
</form>
</ValidationObserver>
...

유효성 검사 공급자는 이제 입력을 처리합니다. v-slot="v" 속성을 허용합니다. 덜 장황하게 만들기 위해 ES6의 객체 파괴를 사용하고 v-slot="{ errors }" 로 바꿀 수 있습니다.
또한 오류 메시지를 표시하는 데 사용되는 이름 속성과 유효성 검사 규칙도 허용합니다.
Read more about registering the Validation Provider heere
이를 통해 이제 오류를 활용하고 html에도 표시할 수 있습니다.

      <ValidationProvider name="Email" rules="required|email" v-slot="{ errors }">
            <div class="email-input mb-4">
              <label
                for="email"
                class="block text-gray-700 text-sm font-bold mb-2"
              >
                Email</label
              >
              <input
                id="email"
                class="shadow appearance-none borderrounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
                type="text"
                placeholder="Email"
                aria-describedby="emailHelp"
                v-model="email"
              />

              <span class="text-xs text-red-700" id="emailHelp">{{
                errors[0]
              }}</span>
            </div>
          </ValidationProvider>

          <ValidationProvider
            name="Password"
            rules="required|min:6"
            v-slot="{ errors }"
          >
            <div class="password-input mb-6">
              <label
                for="password"
                class="block text-gray-700 text-sm font-bold mb-2"
                >Password</label
              >

              <input
                aria-describedby="passwordHelp"
                v-model="password"
                class="shadow appearance-none borderrounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
                id="password"
                type="password"
                placeholder="*******"
              />

              <span class="text-xs text-red-700" id="emailHelp">{{
                errors[0]
              }}</span>
              <span class="text-xs text-red-700" id="passwordHelp"></span>
            </div>
          </ValidationProvider>

마지막으로 유효성 검사가 성공적으로 통과되었는지 확인하기 위해 제출 버튼을 누를 때 유효성 검사 관찰자가 트리거되는지 확인해야 합니다.
Validation Observer에 v-slot="{ handleSubmit }"를 추가하고 양식에 @submit.prevent 이벤트 리스너도 추가해야 합니다.

...
 <ValidationObserver v-slot="{ handleSubmit }" ref="loginForm">
                    <form @submit.prevent="handleSubmit(login)" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
...

그게 요약입니다. 값을 입력하지 않고 제출 버튼을 클릭하거나 이메일/비밀번호에 유효하지 않은 값을 입력하면 페이지가 다음과 같아야 합니다.