一、简介：

        VeeValidate 是一个流行的 Vue 3 验证库，它提供了一种声明的方式来构建验证逻辑。

        VeeValidate 3 旨在与 Vue 3 的组合式 API（Composition API）无缝集成，从而利用 Vue 3 的强大功能和性能优势。

       1.简单

                基于模板的验证，既熟悉又易于设置。

       2.灵活

                验证 HTML 输入和 Vue 组件，生成本地化错误，可扩展，它做到了这一切。

       3.配置

                不会妨碍您的配置，一切都是可选的。

二、如何安装 VeeValidate 3：

(这里需要安装VeeValidate 3并且集成yup)

        为什么集成yup?

                Yup 是一个流行的 JavaScript 模式验证库，它提供了丰富的验证方法来处理各种复杂的验证规则。通过集成 Yup，VeeValidate 3 能够利用这些内建的验证方法，从而简化开发者在创建验证规则时的工作。

<code>npm install vee-validate@next yup

三、如何使用VeeValidate 3：

import { validate } from 'vee-validate';

import * as yup from 'yup';

四、入门：

1.最大值（如果超过20最大值则返回对象）

const result = validate(searchInput.value, yup.string().max(20, '长度不能超过20个字符'));

语法

validate(文本框、需要校验的值, yup.文本框类型().max(最大值, '反馈信息'));

在没有超过最大值的情况下valid值为true

在超过最大值情况下vaild值为false并且会补充errors报错信息

值得注意的是errors返回的不是字符串，而是数组。而valid返回的是一个布尔值

<code>{

errors:"错误信息",

valid:状态

}

1.注意事项：

        在使用validate函数时需要异步！（async+await）否则没有效果

const designation = async () => {

const result = await validate(pageData.pageNum, yup.number().required('请输入页面值'));

console.log(result);

if (pageData.pageNum <= pageData.pageCount && result.valid) {

console.log(result);

}

}

五、基础函数：

1.最大值

validate(校验值, yup.string().max(最大值, '反馈信息'))

validate(value, yup.string().min(5, '长度不能小于5个字符'));

2.最小值

validate(校验值, yup.string().min(最小值, '反馈信息'));

validate(value, yup.string().max(20, '长度不能超过20个字符'));

3.长度范围

validate(校验值, yup.string().length(最小长度, 最大长度, '反馈信息'));

validate(value, yup.string().length(5, 20, '长度必须在5到20个字符之间'));

4.必填验证

validate(校验值, yup.string().required('反馈信息'));

validate(value, yup.string().required('此字段是必需的'));

5.电子邮件验证

validate(校验值, yup.string().email('反馈信息'));

validate(value, yup.string().email('必须是一个有效的电子邮件地址'));

6.URL

validate(校验值, yup.string().url('反馈信息'));

validate(value, yup.string().url('必须是一个有效的URL地址'));

7.自定义正则表达式

validate(校验值, yup.string().matches(正则表达式, '反馈信息'));

validate(value, yup.string().matches(/^[a-zA-Z]+$/, '只能包含字母'));

8.数字验证

validate(校验值, yup.number().positive('反馈信息'));

validate(value, yup.number().positive('必须是一个正数'));

9.整数验证

validate(校验值, yup.number().integer('反馈信息'));

validate(value, yup.number().integer('必须是一个整数'));

10.自定义

validate(校验值, yup.string().test('custom-test', '反馈信息', 条件));

validate(value, yup.string().test('custom-test', '自定义验证失败', val => val === 'expectedValue'));

六、进阶函数：

1.可以为空

validate(校验值, yup.string().nullable(true, '反馈信息'));

validate(value, yup.string().nullable(true, '可以为空'));

2.验证前使用方法

validate(校验值, yup.string().transform(value => value.toLowerCase(), '反馈信息'));

validate(value, yup.string().transform(value => value.toLowerCase(), '转换为小写'));

3.去除字符串首尾的空格、去除数组的空元素

validate(校验值, yup.string().strip());

validate(value, yup.string().strip());

4.数组包含值

validate(校验值, yup.string().oneOf([ '数组', '是否包含' ], '反馈信息'));

validate(value, yup.string().oneOf([ 'option1', 'option2' ], '必须是一个有效选项'));

4.数组非包含值

validate(校验值, yup.string().notOneOf([ '数组', '不包含' ], '反馈信息'));

validate(value, yup.string().notOneOf([ 'option1', 'option2' ], '不能是这些选项之一'));

5.值之间

validate(校验值, yup.string().between(最小值, 最大值, '反馈信息'));

validate(value, yup.string().between(1, 10, '必须在1到10之间'));

6.叠加使用

validate(value, yup.string().nullable(true, '可以为空').between(1, 10, '必须在1到10之间'));

7.大于

validate(校验值, yup.number().moreThan(大于值, '反馈信息'));

validate(value, yup.number().moreThan(18, '成年人年龄必须大于18岁'));

8.小于

validate(校验值,yup.number().lessThan(小于值, '反馈信息'));

validate(value,yup.number().lessThan(18, '未成年人年龄必须小于18岁'));

8.自定义条件

校验值.yupTest('is-older', '反馈信息', value => {

逻辑判断

return true;

});

// age 必须大于 birthdate 字段计算出的年龄

ageField.value.yupTest('is-older', '年龄必须大于18岁', async value => {

const birthdate = new Date(birthdateField.value);

const age = new Date().getFullYear() - birthdate.getFullYear();

return value > age;

});

9.连续条件

校验值.when('age', {

is: 条件,

then: 其他条件,

otherwise:继续条件

});

value.when('age', {

is: (val) => val > 18,

then: yup.number().moreThan(18, '年龄必须大于18岁'),

otherwise: yup.number().lessThan(100, '年龄不能超过100岁')

});

10.进阶使用

<template>

<ValidationProvider rules="even" v-slot="{ errors }">code>

<input v-model="值" type="number" placeholder="type something">code>

<span>{ { 反馈信息[0] }}</span>

</ValidationProvider>

</template>

<script>

import { extend } from 'vee-validate';

extend('even', 值=> {

return 条件;

});

export default {

data: () => ({

值: ''

})

};

</script>

<template>

<ValidationProvider rules="even" v-slot="{ errors }">code>

<input v-model="value" type="number" placeholder="type something">code>

<span>{ { errors[0] }}</span>

</ValidationProvider>

</template>

<script>

import { extend } from 'vee-validate';

extend('even', value => {

return value % 2 === 0;

});

export default {

data: () => ({

value: ''

})

};

</script>

七、VeeValidate 3组件