Vue3组合式API：构建可复用表单验证库

技术教程壹维导航

1 0 0

Vue3组合式API实战：从零构建可复用的表单验证库

引言

Vue3的组合式API（Composition API）为组件逻辑复用提供了更灵活的方式。本文将带你从零开始，构建一个可复用的表单验证库，涵盖验证规则、错误处理和状态管理等核心功能。

第一步：设计验证规则系统

首先需要设计一个灵活的验证规则系统。我们可以使用函数来定义验证规则，每个规则接收字段值并返回验证结果。

创建规则类型接口，定义规则名称、验证函数和错误消息
实现基础验证规则：必填、最小长度、最大长度、邮箱格式等
支持自定义规则，允许用户传入自定义验证函数

例如，必填规则可以这样实现：

const required = {
  validate: (value) => value !== undefined && value !== null && value.trim() !== \'\',
  message: \'此字段为必填项\'
}

第二步：封装验证逻辑

使用ref和reactive来管理表单状态和错误信息。将验证逻辑封装为一个可复用的组合函数。

使用reactive创建表单数据对象
使用ref存储验证错误信息
实现validate方法，遍历所有规则并执行验证
提供reset方法重置表单和错误状态

核心验证逻辑示例：

const useFormValidation = (initialValues, rules) => {
  const form = reactive(initialValues)
  const errors = ref({})
  
  const validate = async () => {
    const newErrors = {}
    let isValid = true
    
    for (const field in rules) {
      for (const rule of rules[field]) {
        if (!rule.validate(form[field])) {
          newErrors[field] = rule.message
          isValid = false
          break
        }
      }
    }
    
    errors.value = newErrors
    return isValid
  }
  
  return { form, errors, validate }
}

第三步：创建表单组件

将验证逻辑与UI组件结合，创建一个可复用的表单组件。支持动态字段渲染和错误提示。

使用v-model双向绑定表单数据
在blur事件时触发字段验证
实时显示验证错误信息
提供提交按钮，点击时执行整体验证

组件使用示例：

<template>
  <form @submit.prevent=\"handleSubmit\">
    <input v-model=\"form.username\" @blur=\"validateField(\'username\')\" />
    <span v-if=\"errors.username\">{{ errors.username }}</span>
    <button type=\"submit\">提交</button>
  </form>
</template>