Validating Vue 3 Forms : Why Vee-Validate?

목적

• Validate single fields and full forms -  learn how to use Vee-Validate to validate both a single input in our applications, and then grow that to validating a full form with a defined set of rules.
• Vee-Validate를 사용하여 애플리케이션의 단일 입력을 모두 검증한 다음, 정의된 규칙 세트를 사용하여 전체 양식을 검증하는 것을 알게 된다.
• Handle errors - Next, we will learn together how to check and present validation errors to our users as they progress through filling out or forms.
• 사용자가 form을 작성하거나 form을 작성하는 과정에서 유효성 검사 오류를 확인하고 사용자에게 제시하는 방법을 알게 된다..
• Key API differences - We will explore the different ways of obtaining information about the state of our forms, for example, how to tell when an error is present within a field with directly vs extracting all the form’s errors at once.
• 양식 상태에 대한 정보를 얻는 다양한 방법, 예를 들어, 필드 내에 오류가 있는지 직접 확인하는 방법과 모든 양식의 오류를 한 번에 추출하는 방법을 알게된다.
• YUP - Later in the course, we will explore the benefits of using an out of the box validation methods library, YUP, and it’s benefits as opposed to writing your own.
• 즉시 사용 가능한 검증 방법 라이브러리인 YUP를 사용할 때의 이점을 직접 작성하는 것과 비교하여 확인하겠음.
• Best practices - We will implement and understand together the libraries best practices such as how to handle form submit events or the benefits of lazy vs aggressive validation.
• 우리는 양식 제출 이벤트를 처리하는 방법이나, lazy 유효성 검사와 aggressive  유효성 검사의 이점과 같은 라이브러리 모범 사례를 구현하고 이해할 것임.

install 하는 방법

yarn add vee-validate@next

pm i vee-validate@next --save

 

 

source codes

https://github.com/pidokige02/validating-vue3-forms-demo

GitHub - pidokige02/validating-vue3-forms-demo