Vue Form Validator Plus

一个功能强大、易于使用的 Vue 3 表单校验插件，支持 50+ 种常见校验规则。

✨ 特性

• 🎯 开箱即用 - 包含 50+ 种内置校验规则
• 🚀 轻量高效 - 体积小，性能优
• 💪 TypeScript - 完整的类型定义
• 🔄 异步校验 - 支持异步校验器
• 🎨 灵活扩展 - 支持自定义校验规则
• 📱 响应式 - 基于 Vue 3 响应式系统
• 🌍 国际化 - 支持自定义错误消息

📦 安装

npm install vue-form-validator-plus

或使用 yarn:

yarn add vue-form-validator-plus

或使用 pnpm:

pnpm add vue-form-validator-plus

🚀 快速开始

全局注册

import { createApp } from 'vue'
import FormValidatorPlugin from 'vue-form-validator-plus'
import App from './App.vue'

const app = createApp(App)

// 注册插件
app.use(FormValidatorPlugin, {
  // 可选：自定义错误消息
  messages: {
    required: '该字段必填',
    email: '邮箱格式不正确'
  }
})

app.mount('#app')

组件中使用

<template>
  <div class="form-container">
    <form @submit.prevent="handleSubmit">
      <div class="form-group">
        <label>用户名：</label>
        <input
          v-model="formData.username"
          @blur="validateField('username')"
          type="text"
        />
        <span class="error" v-if="hasError('username')">
          {{ getFieldError('username') }}
        </span>
      </div>

      <div class="form-group">
        <label>邮箱：</label>
        <input
          v-model="formData.email"
          @blur="validateField('email')"
          type="email"
        />
        <span class="error" v-if="hasError('email')">
          {{ getFieldError('email') }}
        </span>
      </div>

      <div class="form-group">
        <label>手机号：</label>
        <input
          v-model="formData.phone"
          @blur="validateField('phone')"
          type="tel"
        />
        <span class="error" v-if="hasError('phone')">
          {{ getFieldError('phone') }}
        </span>
      </div>

      <div class="form-group">
        <label>密码：</label>
        <input
          v-model="formData.password"
          @blur="validateField('password')"
          type="password"
        />
        <span class="error" v-if="hasError('password')">
          {{ getFieldError('password') }}
        </span>
      </div>

      <div class="form-group">
        <label>确认密码：</label>
        <input
          v-model="formData.confirmPassword"
          @blur="validateField('confirmPassword')"
          type="password"
        />
        <span class="error" v-if="hasError('confirmPassword')">
          {{ getFieldError('confirmPassword') }}
        </span>
      </div>

      <button type="submit" :disabled="validating">
        {{ validating ? '验证中...' : '提交' }}
      </button>
    </form>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { useFormValidator } from 'vue-form-validator-plus'

// 表单数据
const formData = reactive({
  username: '',
  email: '',
  phone: '',
  password: '',
  confirmPassword: ''
})

// 校验规则
const rules = {
  username: [
    { required: true, message: '请输入用户名' },
    { minLength: 4, message: '用户名至少4个字符' },
    { maxLength: 16, message: '用户名最多16个字符' },
    { username: true, message: '用户名只能包含字母、数字、下划线' }
  ],
  email: [
    { required: true, message: '请输入邮箱' },
    { email: true, message: '邮箱格式不正确' }
  ],
  phone: [
    { required: true, message: '请输入手机号' },
    { phone: true, message: '手机号格式不正确' }
  ],
  password: [
    { required: true, message: '请输入密码' },
    { minLength: 6, message: '密码至少6个字符' },
    { password: true, message: '密码必须包含数字和字母' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码' },
    { same: 'password', message: '两次密码输入不一致' }
  ]
}

// 创建校验器
const {
  errors,
  validating,
  validate,
  validateField,
  hasError,
  getFieldError,
  clearErrors
} = useFormValidator(formData, rules)

// 提交表单
const handleSubmit = async () => {
  const result = await validate()
  
  if (result.valid) {
    console.log('表单验证通过', formData)
    // 提交表单数据到服务器
  } else {
    console.log('表单验证失败', result.errors)
  }
}
</script>

<style scoped>
.form-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.error {
  color: #f56c6c;
  font-size: 12px;
  margin-top: 5px;
  display: block;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:disabled {
  background-color: #a0cfff;
  cursor: not-allowed;
}
</style>

📚 校验规则

基础校验

邮箱和通讯

网络相关

数字相关

身份证件

银行和金融

邮编和地址

日期和时间

中文相关

英文和字符

特殊格式

车辆相关

社交媒体

文件相关

比较验证

包含验证

自定义验证

// 同步自定义验证
{
  custom: (value, formData) => {
    return value.startsWith('prefix_')
  },
  message: '必须以 prefix_ 开头'
}

// 异步自定义验证
{
  asyncValidator: async (value, formData) => {
    const response = await fetch(`/api/check-username?name=${value}`)
    const data = await response.json()
    return data.available
  },
  message: '用户名已被占用'
}

🔧 API

useFormValidator(formData, rules)

创建表单校验器

参数：

• formData: 响应式的表单数据对象
• rules: 校验规则配置

返回：

• validator: 校验器实例
• errors: 错误信息对象（响应式）
• validating: 是否正在校验（响应式）
• validate(): 校验所有字段
• validateField(field): 校验单个字段
• clearErrors(): 清除所有错误
• clearFieldError(field): 清除指定字段错误
• reset(): 重置表单
• setFieldError(field, errors): 设置字段错误
• getFieldError(field): 获取字段的第一个错误
• hasError(field): 检查字段是否有错误

🌍 自定义错误消息

全局配置

app.use(FormValidatorPlugin, {
  messages: {
    required: '该字段必填',
    email: '邮箱格式不正确',
    phone: '请输入正确的手机号'
  }
})

单个规则配置

const rules = {
  username: [
    {
      required: true,
      message: '请输入用户名'
    },
    {
      minLength: 4,
      message: '用户名至少需要4个字符'
    }
  ]
}

📝 完整示例

查看 example 目录获取更多示例代码。

📄 License

MIT License © 2024

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📮 联系方式

如有问题或建议，请提交 Issue。