当前位置：首页 > VUE

vue 实现表单验证

2026-01-19 04:15:10VUE

使用 Vue 内置验证指令

Vue 提供了一些内置指令用于表单验证，例如 v-model 和 v-bind。结合 HTML5 的表单验证属性，可以快速实现基础验证。

<template>
  <form @submit.prevent="handleSubmit">
    <input 
      v-model="email" 
      type="email" 
      required 
      placeholder="请输入邮箱"
    >
    <span v-if="!email && isSubmitted">邮箱不能为空</span>

    <input 
      v-model="password" 
      type="password" 
      required 
      minlength="6"
      placeholder="请输入密码"
    >
    <span v-if="password.length < 6 && isSubmitted">密码至少6位</span>

    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: '',
      isSubmitted: false
    }
  },
  methods: {
    handleSubmit() {
      this.isSubmitted = true
      if (this.email && this.password.length >= 6) {
        // 验证通过逻辑
      }
    }
  }
}
</script>

使用 VeeValidate 插件

VeeValidate 是 Vue 生态中流行的表单验证库，提供更丰富的验证规则和错误提示功能。

安装 VeeValidate：

npm install vee-validate

基础使用示例：

<template>
  <Form @submit="handleSubmit" v-slot="{ errors }">
    <Field 
      name="email" 
      type="email" 
      rules="required|email" 
      v-model="email"
    />
    <span>{{ errors.email }}</span>

    <Field 
      name="password" 
      type="password" 
      rules="required|min:6" 
      v-model="password"
    />
    <span>{{ errors.password }}</span>

    <button type="submit">提交</button>
  </Form>
</template>

<script>
import { Form, Field } from 'vee-validate'

export default {
  components: {
    Form,
    Field
  },
  data() {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    handleSubmit(values) {
      console.log('提交数据:', values)
    }
  }
}
</script>

自定义验证规则

在 VeeValidate 中可以扩展自定义验证规则：

import { defineRule } from 'vee-validate'

defineRule('phone', value => {
  if (!value) return '手机号不能为空'
  const regex = /^1[3-9]\d{9}$/
  if (!regex.test(value)) return '手机号格式不正确'
  return true
})

// 使用自定义规则
<Field name="mobile" rules="required|phone" v-model="mobile" />

异步验证实现

对于需要后端验证的字段（如用户名是否已存在），可以使用异步验证：

defineRule('uniqueUsername', async (value) => {
  if (!value) return true
  const exists = await checkUsernameExists(value) // 假设的API调用
  return exists ? '用户名已存在' : true
})

<Field name="username" rules="required|uniqueUsername" v-model="username" />

表单整体验证状态

获取整个表单的验证状态，控制提交按钮等交互：

<Form v-slot="{ meta, isSubmitting }">
  <!-- 表单字段 -->
  <button type="submit" :disabled="!meta.valid || isSubmitting">
    {{ isSubmitting ? '提交中...' : '提交' }}
  </button>
</Form>

验证样式处理

根据验证状态动态调整样式，提升用户体验：

input.valid {
  border-color: green;
}
input.invalid {
  border-color: red;
}

<Field name="email" v-slot="{ field, meta }">
  <input 
    v-bind="field" 
    :class="{ 'valid': meta.valid, 'invalid': meta.touched && !meta.valid }"
  >
</Field>

复杂表单验证策略

对于多步骤表单或复杂验证逻辑，可以采用策略模式：

vue 实现表单验证

const validationSchema = {
  email: 'required|email',
  password: 'required|min:6',
  confirmPassword: 'required|confirmed:@password'
}

<Form :validation-schema="validationSchema">
  <!-- 表单内容 -->
</Form>