93. Defining Rules
npm create vue@latest
이번엔 규칙을 정의하는 방법을 배울 것입니다.
규칙은 입력값이 들어오는 함수입니다.
이 함수가 반환하는 값은 입력이 유효한지를 유효성 검사 라이브러리에 알려줍니다.
좀 더 자세히 살펴보겠습니다.
기본적으로, validate는 입력이 충족해야 하는 요구 사항을 가정하지 않습니다.
유효하기 위해 우리는 정확히 어떤 규칙을 적용하고 싶은지 알려주어야 합니다.
뿐만 아니라, 우리의 애플리케이션에 어떤 규칙이 존재할지도 알려주어야 합니다.validate는 규칙을 우리 애플리케이션에 로드하지 않습니다.
이것은 빌드를 작고 가볍게 유지합니다.
우리가 사용하고 싶다면 수동으로 가져와야 합니다.
대안으로, 사용자 정의 규칙을 정의할 수도 있습니다.
하지만 저는 validate에 번들로 제공되는 규칙이 대부분의 시나리오를 커버할 것이라고 생각합니다.
일부 규칙을 가져와 보겠습니다.
이 강의의 리소스 섹션에서는 VeeValidate 라이브러리에서 사용할 수 있는 규칙 목록을 제공합니다.
이 페이지에서는 VeeValidate 라이브러리에서 사용 가능한 규칙을 어떻게 사용할 수 있는지에 대해 설명합니다.
곧 그 사용법을 살펴볼 것입니다.
사용 가능한 규칙 섹션으로 스크롤을 내리세요.
신용카드 번호, 숫자 및 URL 값과 같은 것들을 테스트할 수 있는 20개 이상의 사용 가능한 규칙이 있습니다.
우리가 사용할 첫 번째 규칙은 required 규칙입니다.
이 규칙은 입력에 값이 있는지 확인하는 역할을 합니다.
입력이 채워지는 것을 필수로 하고 싶습니다.
이것이 우리가 추가하고 싶은 규칙입니다.
첫 번째로 해야할 일은 규칙을 설치하는 것입니다.
공식 규칙은 별도의 패키지를 통해 설치할 수 있습니다.
커맨드 라인으로 전환하세요.
서버가 실행중이라면 종료하세요.
그 후에 다음 명령어를 실행하셔야됩니다.
npm i @vee-validate/rules
규칙이 성공적으로 설치되었습니다.
편집기로 돌아가서 그것들을 사용하기 시작합시다.
다음으로 할 일은 규칙을 등록하는 것입니다.
규칙은 로컬 또는 전역적으로 등록할 수 있습니다.
우리 애플리케이션에서 여러 양식에 대해 유효성 검사를 수행할 것이므로, 규칙을 전역적으로 등록하는 것이 좋습니다.
그러면 언제든지 사용할 수 있습니다.
validation 파일 상단에서, @vee-validate/rules 패키지에서 required 규칙을 가져옵니다.
규칙은 네임스페이스로 정의되어 있습니다.
우리는 특정 규칙을 잡기 위해 객체를 구조화해야 합니다.@vee-validate 패키지에서 defineRule 함수를 가져오도록 import 문을 업데이트 하겠습니다.defineRule 함수는 전역적으로 규칙을 등록할 수 있게 합니다.
우리가 등록한 규칙은 우리가 생성하는 모든 유효성 검사 양식에서 사용할 수 있습니다.install 함수에서 defineRule 함수를 호출할 것입니다.
첫번째 인수는 규칙 이름입니다.
문서에 나열된 이름과 동일하게 사용할 필요는 없으며, 원하는대로 지정할 수 있습니다.
우리가 만들고자 하는 첫번째 규칙은 required 규칙이며, 일관성을 위해 그대로 required라고 부를 것입니다.
두번째 인수는 검증을 수행할 함수입니다.
우리는 rules 패키지에서 required 함수를 가져오고 있기 때문에 함수를 따로 정의할 필요가 없습니다.
우리가 가져오는 모든 규칙은 이미 함수로 되어 있습니다.
따라서 이것을 두 번째 인자로 전달할 수 있습니다.defineRule 함수를 사용하여 새로운 규칙을 성공적으로 등록했습니다.
이 규칙은 우리가 만든 모든 유효성 검사 양식에 사용할 수 있을 것입니다.
import { Form as VeeForm, Field as VeeField, defineRule } 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)
defineRule('required', required)
}
}