当前位置：首页 > VUE

vue表单验证如何实现

2026-01-22 06:02:22VUE

使用 Vue 内置验证（v-model + 手动检查）

通过 v-model 绑定表单数据，在提交时手动检查字段有效性。适用于简单场景。

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="form.email" type="email" placeholder="Email">
    <span v-if="error.email">{{ error.email }}</span>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: { email: '' },
      error: {}
    }
  },
  methods: {
    handleSubmit() {
      this.error = {}
      if (!this.form.email.includes('@')) {
        this.error.email = 'Invalid email format'
        return
      }
      // 提交逻辑
    }
  }
}
</script>

使用 VeeValidate 插件

VeeValidate 提供声明式验证规则和错误提示功能，适合复杂表单场景。

<template>
  <Form @submit="handleSubmit">
    <Field name="email" rules="required|email" v-model="form.email" />
    <ErrorMessage name="email" />
    <button type="submit">Submit</button>
  </Form>
</template>

<script>
import { Form, Field, ErrorMessage } from 'vee-validate'
export default {
  components: { Form, Field, ErrorMessage },
  data() {
    return { form: { email: '' } }
  },
  methods: {
    handleSubmit(values) {
      console.log(values) // 已验证的数据
    }
  }
}
</script>

组合式 API 实现验证

通过 ref 和计算属性实现响应式验证，适合 Vue 3 项目。

<template>
  <input v-model="email" @blur="validateEmail">
  <span v-if="emailError">{{ emailError }}</span>
</template>

<script setup>
import { ref, computed } from 'vue'
const email = ref('')
const emailError = ref('')

const validateEmail = () => {
  emailError.value = email.value.includes('@') ? '' : 'Invalid email'
}
</script>

自定义验证指令

创建全局指令实现复用验证逻辑，适合需要统一验证风格的场景。

// main.js
app.directive('validate-email', {
  mounted(el, binding) {
    el.addEventListener('blur', () => {
      const isValid = el.value.includes('@')
      if (!isValid) {
        el.style.borderColor = 'red'
      }
    })
  }
})

<input v-validate-email v-model="email">

服务端验证结合

前端验证通过后仍需调用 API 进行最终验证，处理用户名重复等业务规则。

methods: {
  async submitForm() {
    try {
      const res = await axios.post('/api/validate', this.form)
      // 处理成功响应
    } catch (error) {
      if (error.response.status === 422) {
        this.errors = error.response.data.errors
      }
    }
  }
}

关键点：