vee validate Download -Vee vee validate 소스 코드 다운로드

vee validate

기타 소스코드

v4.14.7

다운로드

고통없는 vue 형태

특징

? Easy : 친숙하고 쉽게 설정하기 쉬운 선언적 검증
? syn️ Flexible : 동기, 비동기, 필드 레벨 또는 양식 수준 검증
⚡️ FAST : 직관적 인 API 및 작은 발자국으로 더 빠른 형태를 더 빨리 구축합니다.
? 최소 : 복잡한 형태의 문제 만 처리하고 다른 모든 것을 완전히 제어 할 수 있습니다.
? UI Agnostic : 기본 HTML 요소 또는 좋아하는 UI 라이브러리 구성 요소와 함께 작동합니다.
? 프로그레시브 : Vue.js를 점진적 향상 또는 복잡한 설정으로 사용하든
∎ 내장 규칙 : 대부분의 웹 애플리케이션에서 대부분의 요구를 다루는 25 개 이상의 규칙을 가진 동반자 Lib
I18N : 전 세계 개발자가 기여한 내장 규칙을위한 45 개 이상의 로케일

시작하기

설치

 # Install with yarn
yarn add vee-validate

# Install with npm
npm install vee-validate --save

VUE 버전 지원

기본 V4 버전은 VUE 3.X 만 지원하며 이전 버전의 VUE의 경우 다음 테이블을 확인하십시오.

vue 버전	Ve-validate 버전	문서화 링크
`2.x`	`2.x` 또는 `3.x`	v2 또는 v3
`3.x`	`4.x`	v4

용법

Vee-Validate는 양식 검증을 vue.js 앱에 통합하기위한 두 가지 스타일을 제공합니다.

구성 API

양식을 작성하고 유효성 검사, 동작 및 값을 관리하는 가장 빠른 방법은 구성 API입니다.

useForm 으로 양식을 작성한 다음 defineField 사용하여 필드 모델 및 소품/속성 및 handleSubmit 작성하여 값을 사용하여 API로 보냅니다.

 < script setup >
import { useForm } from ' vee-validate ' ;

// Validation, or use `yup` or `zod`
function required ( value ) {
  return value ? true : ' This field is required ' ;
}

// Create the form
const { defineField , handleSubmit , errors } = useForm ({
  validationSchema : {
    field : required,
  },
});

// Define fields
const [ field , fieldProps ] = defineField ( ' field ' );

// Submit handler
const onSubmit = handleSubmit ( values => {
  // Submit to API
  console . log (values);
});
</ script >

< template >
  < form @ submit = " onSubmit " >
    < input v-model = " field " v-bind = " fieldProps " />
    < span >{{ errors . field }}</ span >

    < button >Submit</ button >
  </ form >
</ template >

더 많은 정보를 얻으려면 구성 API 문서를 확인하십시오.

선언적 구성 요소

고차 구성 요소를 사용하여 양식을 작성할 수도 있습니다. Field 등록하고 구성 요소를 Form 하고 간단한 required 유효성 검사기를 만듭니다.

 < script setup >
import { Field , Form } from ' vee-validate ' ;

// Validation, or use `yup` or `zod`
function required ( value ) {
  return value ? true : ' This field is required ' ;
}

// Submit handler
function onSubmit ( values ) {
  // Submit to API
  console . log (values);
}
</ script >

< template >
  < Form v-slot = " { errors } " @ submit = " onSubmit " >
    < Field name = " field " : rules = " required " />

    < span >{{ errors . field }}</ span >

    < button >Submit</ button >
  </ Form >
</ template >