Vue 作为国内非常流行的渐进式 Javascript 框架。 Vue3 新版本已经逐渐成熟。 本文整理了 Vue 几款非常优秀的表单校验组件，能让 Vue 的表单开发起来更加如鱼得水。
VueValidate
VueValidate 是一款 Vue 表单验证组件，支持 Vue2，Vue3。允许用户自定义验证规则，支持动态远程校验。特性如下：
- 🍞 简单：声明式验证
- 🧘♀️ 灵活：支持同步、异步、字段级或表单级验证
- ⚡️ 快速：构建性能优越，只需要通过简单的 api 就可以实现构建
- 😎 不限于某一个 UI 框架
- ✅ 内置规则：自带 20 条以上的规则，满足日常使用需求
- 🌐 国际化支持：内置 40 种语言
安装
# 通过 yarn 安装
yarn add vee-validate@next
# 通过 npm 安装
npm install vee-validate@next --save
使用方法
import { Field, Form } from "vee-validate";
export default {
components: {
Field,
Form,
},
methods: {
// 自定义校验方法
isRequired(value) {
return value ? true : "This field is required";
},
},
};
<form v-slot="{ errors }">
<Field name="field" :rules="isRequired" />
<span>{{ errors.field }}</span>
</form>
Vue Formulate
Vue Formulate 也是一款非常优秀的表单生成器，虽然还不支持 Vue3，不过这个组件使用起来非常简单方便，学习成本很低，无论什么类型的表单，都可以使用 FormulateInput 和 FormulateForm 来生成。这也是 Vue Formulate 的主要特点。
同样的，Vue Formulate 也内置了常用的校验规则，允许通过 JSON 配置生成表单，支持国际化，自定义样式等等。
使用方法
例如我们想创建一个选择功能表单，可以这样写
<FormulateInput
type="radio"
label="你如何看待1024nav.com"
:options="{
good: '很好',
great: '很棒',
install: '我现在正在安装。'
}"
/>
