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 >