如何实现vue验证

表单验证基础

在Vue中实现表单验证通常结合HTML5原生验证属性与Vue的响应式特性。基础验证可通过v-model绑定数据，配合required、pattern等HTML属性实现快速校验。

<template>
  <form @submit.prevent="submitForm">
    <input v-model="email" type="email" required placeholder="邮箱">
    <span v-if="!isEmailValid">请输入有效邮箱</span>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return { email: '' }
  },
  computed: {
    isEmailValid() {
      const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      return re.test(this.email)
    }
  },
  methods: {
    submitForm() {
      if (!this.isEmailValid) return
      // 提交逻辑
    }
  }
}
</script>

使用VeeValidate库

VeeValidate是流行的Vue验证库，提供声明式验证规则和错误提示功能。需先安装依赖：

npm install vee-validate

基础配置示例：

import { Form, Field, ErrorMessage } from 'vee-validate'
import * as yup from 'yup' // 规则引擎

export default {
  components: { Form, Field, ErrorMessage },
  data() {
    const schema = yup.object({
      email: yup.string().required().email(),
      password: yup.string().required().min(8)
    })
    return { schema }
  }
}

模板使用：

<Form :validation-schema="schema" @submit="onSubmit">
  <Field name="email" type="email" />
  <ErrorMessage name="email" />

  <Field name="password" type="password" />
  <ErrorMessage name="password" />

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

自定义验证规则

通过validator函数可实现复杂业务逻辑验证。适用于需要后端校验或动态规则的情况。

methods: {
  async checkUsername(value) {
    const exists = await api.checkUsername(value)
    return exists ? '用户名已存在' : true
  }
}

模板绑定：

<Field name="username" :rules="checkUsername" />

实时验证反馈

结合watch或计算属性实现输入时实时验证，提升用户体验。可通过CSS类名动态反映验证状态。

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

<input 
  v-model="username"
  :class="{ invalid: usernameError, valid: !usernameError && username }">
<p v-if="usernameError">{{ usernameError }}</p>

服务端验证集成

当需要与后端API交互时，可在提交时捕获错误并映射到前端字段。

async submitForm() {
  try {
    await api.submit(this.formData)
  } catch (error) {
    if (error.response.status === 422) {
      this.errors = error.response.data.errors
    }
  }
}

错误显示：

<span v-for="(error, field) in errors" :key="field">
  {{ error[0] }}
</span>