前端，Vue3表单校验

+

Vue3 表单校验基础

• 使用 v-model 与表单元素绑定
• 利用 @blur 或 @input 事件触发校验
• 简单的手动校验实现

使用 Vuelidate 进行校验

• Vuelidate 简介及安装
• 定义校验规则（如 required、minLength、email 等）
• 结合 reactive 和 computed 实现动态校验

javascript复制插入

import { required, minLength, email } from '@vuelidate/validators'
import { useVuelidate } from '@vuelidate/core'

const rules = {
  name: { required, minLength: minLength(3) },
  email: { required, email }
}

const v$ = useVuelidate(rules, formData)

复制插入

使用 Vue3 Composition API 自定义校验

• 利用 ref 和 reactive 管理表单数据
• 编写自定义校验函数，并返回错误信息
• 结合 watch 或 computed 实现实时校验

javascript复制插入

const form = reactive({
  username: '',
  password: ''
})

const errors = reactive({
  username: '',
  password: ''
})

const validateUsername = () => {
  if (!form.username) errors.username = '用户名不能为空'
  else if (form.username.length < 3) errors.username = '用户名至少 3 个字符'
  else errors.username = ''
}

复制插入

结合第三方库（如 Yup）进行 Schema 校验

• Yup 简介及安装
• 定义 Yup Schema 进行复杂校验
• 集成到 Vue3 项目中

javascript复制插入

import * as yup from 'yup'

const schema = yup.object().shape({
  email: yup.string().email('请输入有效的邮箱').required('邮箱不能为空'),
  password: yup.string().min(6, '密码至少 6 位').required('密码不能为空')
})

复制插入

前端 UI 组件库的表单校验（如 Element Plus、Ant Design Vue）

• 使用 Element Plus 的 Form 组件及校验规则
• 结合 async-validator 进行异步校验
• 处理表单提交时的全局校验

表单校验最佳实践

• 统一错误提示风格
• 避免过度校验（如频繁触发 @input 事件）
• 使用防抖优化性能

总结

• Vue3 表单校验的多种方式对比
• 根据项目需求选择合适的校验方案
• 未来可能的改进方向（如更强大的类型推导）