vee validate下載 - vee validate源代碼下載

vee validate

其他源碼

v4.14.7

下載

無痛形式

特徵

？簡單：熟悉且易於設置的聲明性驗證
？‍♀️靈活：同步，異步，場級或表單級驗證
⚡️快速：使用直觀的API和小足跡更快地構建形式
？最小值：只能處理複雜的形式關注，使您可以完全控制其他一切
？ UI不可知論：與本機HTML元素或您喜歡的UI庫組件一起工作
？進步：無論您使用vue.js作為漸進式增強還是在復雜的設置中
✅內置規則：具有25多個規則的伴侶，在大多數Web應用程序中涵蓋了大多數需求
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應用程序中。

組成API

創建形式並管理其驗證，行為和值的最快方法是組成API。

使用useForm創建您的表單，然後使用defineField創建您的字段模型和Prop/屬性和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 >