vee validateダウンロード-VEEソースコードのダウンロードをvee validate

vee validate

その他のソースコード

v4.14.7

ダウンロード

痛みのないvue形式

特徴

？簡単：馴染みがあり、セットアップが簡単な宣言的検証
？‍♀ ‍♀️フレキシブル：同期、非同期、フィールドレベル、またはフォームレベルの検証
⚡️高速：直感的なAPIと小さなフットプリントを使用して、より高速なフォームをより高速に構築する
？最小限：複雑なフォームの懸念を処理するだけで、他のすべてを完全に制御できます
？ UI Agnostic：ネイティブHTML要素またはお気に入りのUIライブラリコンポーネントで動作します
？プログレッシブ： vue.jsをプログレッシブエンハンスメントとして使用するか、複雑なセットアップで使用するかどうかにかかわらず機能します
✅ビルトインルール：ほとんどのWebアプリケーションでほとんどのニーズをカバーする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バージョン	vee-validateバージョン	ドキュメントリンク
`2.x`	`2.x`または`3.x`	V2またはV3
`3.x`	`4.x`	V4

使用法

Vee-Validateは、フォーム検証をvue.jsアプリに統合するための2つのスタイルを提供します。

構成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 >