DeepSeek 助力 Vue 开发丝滑的表单验证Form Validation功能

<template>
  <form 
    class="form-validation" 
    :class="{ 'form-inline': inline }" 
    @submit.prevent="handleSubmit"
  >
    <div 
      v-for="field in fields" 
      :key="field.name" 
      class="form-item"
    >
      <label 
        :for="field.name" 
        class="form-label"
        :style="{ width: labelWidth }"
      >{{ field.label }}</label>
      <!-- 文本输入 -->
      <input
        v-if="field.type === 'text' || field.type === 'password'"
        :id="field.name"
        v-model="formData[field.name]"
        :type="field.type"
        :disabled="disabled"
        class="form-input"
        @input="handleInput(field.name)"
        @change="handleChange(field.name)"
      >
      <!-- 下拉选择 -->
      <select
        v-else-if="field.type === 'select'"
        :id="field.name"
        v-model="formData[field.name]"
        :disabled="disabled"
        class="form-select"
        @change="handleChange(field.name)"
      >
        <option 
          v-for="opt in field.options" 
          :key="opt.value" 
          :value="opt.value"
        >{{ opt.label }}</option>
      </select>
      <!-- 错误提示 -->
      <div 
        v-if="errors[field.name]" 
        class="error-message"
        :aria-live="'polite'"
      >{{ errors[field.name] }}</div>
    </div>
    <slot name="submit">
      <button 
        type="submit" 
        class="submit-btn"
        :disabled="disabled"
      >提交</button>
    </slot>
  </form>
</template>
<script setup>
import { ref, reactive, watch, toRaw } from 'vue'
// 内置验证规则
const builtInRules = {
  required: value => ({
    valid: !!value,
    message: '必填项'
  }),
  email: value => ({
    valid: /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
    message: '邮箱格式不正确'
  }),
  minLength: min => value => ({
    valid: value.length >= min,
    message: `至少需要${min}个字符`
  })
}
const props = defineProps({
  modelValue: {
    type: Object,
    required: true
  },
  fields: {
    type: Array,
    default: () => []
  },
  rules: {
    type: Object,
    default: () => ({})
  },
  validateOnChange: {
    type: Boolean,
    default: true
  },
  labelWidth: {
    type: [String, Number],
    default: '100px'
  },
  inline: Boolean,
  disabled: Boolean
})
const emit = defineEmits([
  'update:modelValue',
  'validate:success',
  'validate:fail',
  'submit',
  'change'
])
// 响应式数据
const formData = reactive({ ...props.modelValue })
const errors = reactive({})
// 同步外部modelValue变化
watch(() => props.modelValue, (newVal) => {
  Object.assign(formData, newVal)
})
// 输入处理
const handleInput = (fieldName) => {
  emit('update:modelValue', { ...formData })
  if (props.validateOnChange) {
    validateField(fieldName)
  }
}
// 字段变化事件
const handleChange = (fieldName) => {
  const value = formData[fieldName]
  emit('change', fieldName, value)
}
// 单个字段验证
const validateField = async (fieldName) => {
  const rules = props.rules[fieldName] || []
  const value = formData[fieldName]
  for (const rule of rules) {
    let validator = rule
    if (typeof rule === 'string' && builtInRules[rule]) {
      validator = builtInRules[rule]
    }
    if (typeof validator === 'function') {
      const result = validator(value)
      if (!result.valid) {
        errors[fieldName] = result.message
        return false
      }
    } else if (typeof validator === 'object' && validator.validator) {
      const customResult = validator.validator(value)
      if (!customResult) {
        errors[fieldName] = validator.message || '验证失败'
        return false
      }
    }
  }
  delete errors[fieldName]
  return true
}
// 整体验证
const validate = async () => {
  let isValid = true
  const errorList = []
  for (const field of props.fields) {
    const valid = await validateField(field.name)
    if (!valid) {
      isValid = false
      errorList.push({
        field: field.name,
        message: errors[field.name]
      })
    }
  }
  if (isValid) {
    emit('validate:success', toRaw(formData))
  } else {
    emit('validate:fail', errorList)
  }
  return isValid
}
// 提交处理
const handleSubmit = async () => {
  const isValid = await validate()
  if (isValid) {
    emit('submit', toRaw(formData))
  }
}
// 暴露验证方法
defineExpose({ validate })
</script>
<style scoped>
.form-validation {
  max-width: 600px;
  margin: 0 auto;
}
.form-item {
  margin-bottom: 1rem;
}
.form-label {
  display: inline-block;
  margin-right: 1rem;
  text-align: right;
}
.form-input,
.form-select {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 200px;
}
.form-inline .form-item {
  display: inline-flex;
  margin-right: 1rem;
}
.error-message {
  color: #ff4444;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}
.submit-btn {
  background-color: #42b983;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.submit-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
</style>

<template>
  <FormValidation
    v-model="formData"
    :fields="fields"
    :rules="rules"
    @submit="handleSubmit"
    @validate:success="handleSuccess"
    @validate:fail="handleFail"
  />
</template>
<script setup>
import { ref } from 'vue'
import FormValidation from '@/components/FormValidation/FormValidation.vue'
const formData = ref({
  username: '',
  password: ''
})
const fields = [
  { name: 'username', label: '用户名', type: 'text' },
  { name: 'password', label: '密码', type: 'password' }
]
const rules = {
  username: [
    'required',
    value => ({
      validator: v => v.length >= 4,
      message: '用户名至少4个字符'
    })
  ],
  password: [
    'required',
    'minLength:6'
  ]
}
const handleSubmit = (formData) => {
  console.log('提交数据:', formData)
}
const handleSuccess = (validData) => {
  console.log('验证成功:', validData)
}
const handleFail = (errors) => {
  console.error('验证失败:', errors)
}
</script>

<template>
  <FormValidation
    v-model="regForm"
    :fields="regFields"
    :rules="regRules"
    label-width="120px"
    @submit="handleRegister"
  >
    <template #submit>
      <button type="submit" class="custom-submit">立即注册</button>
    </template>
  </FormValidation>
</template>
<script setup>
import { ref } from 'vue'
const regForm = ref({
  email: '',
  password: '',
  gender: ''
})
const regFields = [
  { name: 'email', label: '电子邮箱', type: 'text' },
  { name: 'password', label: '设置密码', type: 'password' },
  { 
    name: 'gender', 
    label: '性别', 
    type: 'select',
    options: [
      { value: '', label: '请选择' },
      { value: 'male', label: '男性' },
      { value: 'female', label: '女性' }
    ]
  }
]
const regRules = {
  email: ['required', 'email'],
  password: ['required', 'minLength:8'],
  gender: [v => !!v || '请选择性别']
}
const handleRegister = (formData) => {
  console.log('注册数据:', formData)
}
</script>

<template>
  <FormValidation
    v-model="inlineForm"
    :fields="inlineFields"
    :rules="inlineRules"
    inline
    label-width="80px"
    @change="handleFieldChange"
  />
</template>
<script setup>
import { ref } from 'vue'
const inlineForm = ref({
  search: '',
  category: ''
})
const inlineFields = [
  { name: 'search', label: '搜索', type: 'text' },
  {
    name: 'category',
    label: '分类',
    type: 'select',
    options: [
      { value: '', label: '全部' },
      { value: '1', label: '电子产品' },
      { value: '2', label: '图书' }
    ]
  }
]
const inlineRules = {
  search: [v => v.length <= 20 || '搜索词过长']
}
const handleFieldChange = (fieldName, value) => {
  console.log(`字段 ${fieldName} 变更为:`, value)
}
</script>

import { createRouter, createWebHistory } from 'vue-router'
import RightClickMenuView from '../views/RightClickMenuView.vue'
import RangePickerView from '../views/RangePickerView.vue'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'progress',
      component:  () => import('../views/ProgressView.vue'),
    },
    {
      path: '/tabs',
      name: 'tabs',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      // 标签页（Tabs）
      component: () => import('../views/TabsView.vue'),
    },
    {
      path: '/accordion',
      name: 'accordion',
      // 折叠面板（Accordion）
      component: () => import('../views/AccordionView.vue'),
    },
    {
      path: '/timeline',
      name: 'timeline',
      // 时间线（Timeline）
      component: () => import('../views/TimelineView.vue'),
    },
    {
      path: '/backToTop',
      name: 'backToTop',
      component: () => import('../views/BackToTopView.vue')
    },
    {
      path: '/notification',
      name: 'notification',
      component: () => import('../views/NotificationView.vue')
    },
    {
      path: '/card',
      name: 'card',
      component: () => import('../views/CardView.vue')
    },
    {
      path: '/infiniteScroll',
      name: 'infiniteScroll',
      component: () => import('../views/InfiniteScrollView.vue')
    },
    {
      path: '/switch',
      name: 'switch',
      component: () => import('../views/SwitchView.vue')
    },
    {
      path: '/sidebar',
      name: 'sidebar',
      component: () => import('../views/SidebarView.vue')
    },
    {
      path: '/breadcrumbs',
      name: 'breadcrumbs',
      component: () => import('../views/BreadcrumbsView.vue')
    },
    {
      path: '/masonryLayout',
      name: 'masonryLayout',
      component: () => import('../views/MasonryLayoutView.vue')
    },
    {
      path: '/rating',
      name: 'rating',
      component: () => import('../views/RatingView.vue')
    },
    {
      path: '/datePicker',
      name: 'datePicker',
      component: () => import('../views/DatePickerView.vue')
    },
    {
      path: '/colorPicker',
      name: 'colorPicker',
      component: () => import('../views/ColorPickerView.vue')
    },
    {
      path: '/rightClickMenu',
      name: 'rightClickMenu',
      component: RightClickMenuView
    },
    {
      path: '/rangePicker',
      name: 'rangePicker',
      component: () => import('../views/RangePickerView.vue')
    },
    {
      path: '/navbar',
      name: 'navbar',
      component: () => import('../views/NavbarView.vue')
    },
    {
      path: '/formValidation',
      name: 'formValidation',
      component: () => import('../views/FormValidationView.vue')
    }
  ],
})
export default router

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
    <div class="wrapper">
      <HelloWorld msg="You did it!" />
      <nav>
        <RouterLink to="/">Progress</RouterLink>
        <RouterLink to="/tabs">Tabs</RouterLink>
        <RouterLink to="/accordion">Accordion</RouterLink>
        <RouterLink to="/timeline">Timeline</RouterLink>
        <RouterLink to="/backToTop">BackToTop</RouterLink>
        <RouterLink to="/notification">Notification</RouterLink>
        <RouterLink to="/card">Card</RouterLink>
        <RouterLink to="/infiniteScroll">InfiniteScroll</RouterLink>
        <RouterLink to="/switch">Switch</RouterLink>
        <RouterLink to="/sidebar">Sidebar</RouterLink>
        <RouterLink to="/breadcrumbs">Breadcrumbs</RouterLink>
        <RouterLink to="/masonryLayout">MasonryLayout</RouterLink>
        <RouterLink to="/rating">Rating</RouterLink>
        <RouterLink to="/datePicker">DatePicker</RouterLink>
        <RouterLink to="/colorPicker">ColorPicker</RouterLink>
        <RouterLink to="/rightClickMenu">RightClickMenu</RouterLink>
        <RouterLink to="/rangePicker">RangePicker</RouterLink>
        <RouterLink to="/navbar">Navbar</RouterLink>
        <RouterLink to="/formValidation">FormValidation</RouterLink>
      </nav>
    </div>
  </header>
  <RouterView />
</template>
<style scoped>
header {
  line-height: 1.5;
  max-height: 100vh;
}
.logo {
  display: block;
  margin: 0 auto 2rem;
}
nav {
  width: 100%;
  font-size: 12px;
  text-align: center;
  margin-top: 2rem;
}
nav a.router-link-exact-active {
  color: var(--color-text);
}
nav a.router-link-exact-active:hover {
  background-color: transparent;
}
nav a {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
}
nav a:first-of-type {
  border: 0;
}
@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }
  .logo {
    margin: 0 2rem 0 0;
  }
  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
  nav {
    text-align: left;
    margin-left: -1rem;
    font-size: 1rem;
    padding: 1rem 0;
    margin-top: 1rem;
  }
}
</style>