94. Applying Rules
npm create vue@latest
이 강의에서는 우리가 정의한 규칙들을 양식에 적용하는 방법을 배울 것입니다.
우리의 입력에 대해 규칙을 사용해 보겠습니다.
인증 컴포넌트로 돌아가서, VeeField 컴포넌트에 rules라는 속성을 바인딩함으로써 입력에 규칙을 적용할 수 있습니다.
이 값은 값이 검사될 규칙 목록이어야 합니다.
우리는 이 속성을 required로 설정할 것입니다.
이것은 입력에 규칙을 추가하는 한 가지 방법입니다.
더 좋은 두 번째 방법이 있습니다.
우리 컴포넌트의 템플릿이 점점 복잡해지고 있습니다.
유효성 검사를 위해 많은 코드를 추가하고 있습니다.
규칙을 객체로 아웃소싱하여 템플릿을 더 깔끔하게 만들 수 있습니다.
이 방법을 사용할 것입니다.VeeField 컴포넌트에서 rules 속성을 제거할 것입니다.VeeForm 컴포넌트에서 validation schema라는 속성을 바인딩할 것입니다.validation schema 속성은 규칙을 객체로 아웃소싱할 수 있게 해줍니다.
이 속성의 값은 컴포넌트의 데이터에서 오는 객체여야 합니다.
우리는 이 속성을 schema로 설정할 것입니다.
이 객체는 현재 존재하지 않습니다.
컴포넌트 구성 옵션에 데이터 함수를 추가해 이 객체를 추가합시다.
객체 내에서 schema 객체를 정의할 것입니다.
객체의 속성 이름은 VeeField 컴포넌트의 name 속성에서 사용한 고유 식별자를 참조해야 합니다.
우리가 name 필드에 추가할 규칙은 문자열로 되어 있어야 하며, 우리가 적용하고자 하는 규칙을 나타냅니다.
이 경우 required로 설정할 것입니다.
여기에 있을 동안, 다른 필드들도 추가하겠습니다.
다가오는 강의에서 그들을 검증할 것이기 때문입니다.
다음과 같은 속성을 추가할 것 입니다:
이름, 이메일, 나이, 비밀번호, 비밀번호 확인, 국가, 코스.
우리는 한 번에 모든 입력에 대한 규칙을 추가하지 않을 것입니다.
우리는 미래에 시간을 절약하기 위해 이들을 추가하고 있습니다.
첫 세 단계를 완료했습니다.
마지막 단계는 오류를 처리하는 것입니다.
입력이 유효하지 않은 경우, 사용자에게 피드백을 제공하고 싶습니다.
이를 처리하는 여러 방법이 있습니다.
우리는 입력 아래에 오류 메시지를 출력하는 것으로 처리할 것입니다.
오류 메시지를 출력하기 위한 컴포넌트가 validate에 포함되어 있습니다.
오류를 출력하는 가장 쉬운 방법입니다.
먼저 이 컴포넌트를 등록해야 합니다.
validation 파일로 전환하세요.
상단에서 validate 패키지에서 'ErrorMessage' 컴포넌트를 포함하도록 import 리스트를 업데이트합니다.
다음으로 install 메서드로 스크롤 내리고, app 컴포넌트 함수를 사용하여 이 컴포넌트를 등록할 것입니다.
컴포넌트의 이름은 객체의 이름과 동일할 것입니다.
우리가 등록한 컴포넌트는 오류 메시지를 출력할 것입니다.
오류 메시지가 없으면 아무것도 출력되지 않을 것입니다.
오류 메시지가 있는지 확인할 필요가 없어 시간을 절약합니다.
매우 간단한 컴포넌트입니다.
컴포넌트로 돌아가서 name을 위한 VeeField 컴포넌트 아래에 ErrorMessage 컴포넌트를 추가할 것입니다.
'Text Red 600'이라는 클래스를 추가할 것입니다.ErrorMessage 컴포넌트는 오류가 있을 경우 span 태그를 생성합니다.
우리가 컴포넌트에 추가하는 모든 속성은 생성된 요소에 전달될 것입니다.
우리가 추가하는 클래스는 텍스트 색상을 빨간색으로 변경할 것입니다.
다음으로 할 일은 validate에 어떤 오류를 출력할지 알려주는 것입니다.name이라는 속성을 추가할 것입니다.
이 속성의 값은 필드의 이름이어야 합니다.
오류를 출력해야 할 필드의 값은 VeeField 컴포넌트의 name 속성에 전달한 값과 일치해야 합니다.
이 예제에서는 이름 필드에 대한 오류 메시지를 출력하려고 하므로 name을 전달할 것입니다.
각 필드에 대해서는 하나의 오류만 있을 것입니다.
입력에 여러 오류가 있을 수 있지만, ErrorMessage 컴포넌트는 하나의 오류만 출력할 것입니다.
이것은 완벽하게 괜찮습니다.
개별 입력에 대해 모든 오류를 볼 필요는 없습니다.
우리는 완료했습니다.
더 많은 것들을 할 수 있지만, 이제 브라우저에서 양식을 테스트할 시간이라고 생각합니다.
등록 양식을 열어보세요.
모든 것이 정상적으로 보일 것입니다.
필드가 터치될 때까지 유효성 검사는 수행되지 않습니다.
이름 필드에 임의의 텍스트를 입력해도 오류는 발생하지 않을 것입니다.
필드를 비워두고 무슨 일이 일어나는지 확인해 봅시다.
오류가 아래에 나타날 것입니다.
기본적으로, validate는 오류 메시지를 생성합니다.
우리가 가져온 규칙은 함수입니다.
이 함수들은 true 또는 false을 반환합니다.
이것을 오버라이드할 수 있지만, 다음 몇 강의에서 그것에 대해 다룰 것입니다.
지금은 기본 메시지가 작동할 것입니다.
import { Form as VeeForm, Field as VeeField, defineRule, ErrorMessage } from 'vee-validate'
import { required } from '@vee-validate/rules'
import type { App } from 'vue'
export default {
// install(app: App, options?: { [key: string]: any }) {}
install(app: App) {
app.component('VeeForm', VeeForm)
app.component('VeeField', VeeField)
app.component('ErrorMessage', ErrorMessage)
defineRule('required', required)
}
}
<script setup lang="ts">
import useModal from '@/stores/modal'
import { storeToRefs } from 'pinia'
import { ref } from 'vue'
const modalStore = useModal()
const { hiddenClass, isOpen: modalVisibility } = storeToRefs(modalStore)
const tab = ref('login')
const schema = ref({
name: 'required',
email: '',
age: '',
password: '',
confirm_password: '',
country: '',
tos: ''
})
</script>
<template>
<!-- Auth Modal -->
<div class="fixed z-10 inset-0 overflow-y-auto" id="modal" :class="hiddenClass">
<div
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
>
<div class="fixed inset-0 transition-opacity">
<div class="absolute inset-0 bg-gray-800 opacity-75"></div>
</div>
<!-- This element is to trick the browser into centering the modal contents. -->
<span class="hidden sm:inline-block sm:align-middle sm:h-screen">​</span>
<div
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
>
<!-- Add margin if you want to see some of the overlay behind the modal-->
<div class="py-4 text-left px-6">
<!--Title-->
<div class="flex justify-between items-center pb-4">
<p class="text-2xl font-bold">Your Account</p>
<!-- Modal Close Button -->
<div class="modal-close cursor-pointer z-50" @click="modalVisibility = false">
<i class="fas fa-times"></i>
</div>
</div>
<!-- Tabs -->
<ul class="flex flex-wrap mb-4">
<li class="flex-auto text-center">
<a
class="block rounded py-3 px-4 transition"
:class="{
'hover:text-white text-white bg-blue-600': tab === 'login',
'hover:text-blue-600': tab === 'register'
}"
href="#"
@click.prevent="tab = 'login'"
>
Login
</a>
</li>
<li class="flex-auto text-center">
<a
class="block rounded py-3 px-4 transition"
:class="{
'hover:text-white text-white bg-blue-600': tab === 'register',
'hover:text-blue-600': tab === 'login'
}"
href="#"
@click.prevent="tab = 'register'"
>
Register
</a>
</li>
</ul>
<!-- Login Form -->
<form v-show="tab === 'login'">
<!-- Email -->
<div class="mb-3">
<label class="inline-block mb-2">Email</label>
<input
type="email"
class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
placeholder="Enter Email"
/>
</div>
<!-- Password -->
<div class="mb-3">
<label class="inline-block mb-2">Password</label>
<input
type="password"
class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
placeholder="Password"
/>
</div>
<button
type="submit"
class="block w-full bg-purple-600 text-white py-1.5 px-3 rounded transition hover:bg-purple-700"
>
Submit
</button>
</form>
<!-- Registration Form -->
<VeeForm v-show="tab === 'register'" :validation-schema="schema">
<!-- Name -->
<div class="mb-3">
<label class="inline-block mb-2">Name</label>
<VeeField
type="text"
name="name"
class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
placeholder="Enter Name"
/>
<ErrorMessage class="text-red-600" name="name" />
</div>
<!-- Email -->
<div class="mb-3">
<label class="inline-block mb-2">Email</label>
<input
type="email"
class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
placeholder="Enter Email"
/>
</div>
<!-- Age -->
<div class="mb-3">
<label class="inline-block mb-2">Age</label>
<input
type="number"
class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
/>
</div>
<!-- Password -->
<div class="mb-3">
<label class="inline-block mb-2">Password</label>
<input
type="password"
class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
placeholder="Password"
/>
</div>
<!-- Confirm Password -->
<div class="mb-3">
<label class="inline-block mb-2">Confirm Password</label>
<input
type="password"
class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
placeholder="Confirm Password"
/>
</div>
<!-- Country -->
<div class="mb-3">
<label class="inline-block mb-2">Country</label>
<select
class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
>
<option value="USA">USA</option>
<option value="Mexico">Mexico</option>
<option value="Germany">Germany</option>
</select>
</div>
<!-- TOS -->
<div class="mb-3 pl-6">
<input type="checkbox" class="w-4 h-4 float-left -ml-6 mt-1 rounded" />
<label class="inline-block">Accept terms of service</label>
</div>
<button
type="submit"
class="block w-full bg-purple-600 text-white py-1.5 px-3 rounded transition hover:bg-purple-700"
>
Submit
</button>
</VeeForm>
</div>
</div>
</div>
</div>
</template>
<style scoped></style>