用vue实现表单验证

使用 Vue 实现表单验证

基本表单验证

在 Vue 中可以通过 v-model 绑定表单输入，结合计算属性或方法实现验证逻辑。以下是一个简单的示例：

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

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

使用 Vuelidate 插件

Vuelidate 是一个流行的 Vue 表单验证库，可以简化验证逻辑：

安装 Vuelidate：

npm install vuelidate

使用示例：

<template>
  <form @submit.prevent="submitForm">
    <input v-model="$v.email.$model" type="email">
    <span v-if="$v.email.$error">请输入有效的邮箱地址</span>
    <button type="submit">提交</button>
  </form>
</template>

<script>
import { required, email } from 'vuelidate/lib/validators'

export default {
  data() {
    return {
      email: ''
    }
  },
  validations: {
    email: { required, email }
  },
  methods: {
    submitForm() {
      this.$v.$touch()
      if (this.$v.$invalid) return
      // 提交逻辑
    }
  }
}
</script>

自定义验证规则

可以创建自定义验证函数实现特定需求：

validations: {
  password: {
    required,
    minLength: minLength(8),
    containsUppercase: value => /[A-Z]/.test(value),
    containsNumber: value => /[0-9]/.test(value)
  }
}

实时验证反馈

通过 $dirty 属性控制何时显示错误信息，避免用户未输入时就显示错误：

<span v-if="$v.email.$dirty && !$v.email.required">邮箱不能为空</span>
<span v-if="$v.email.$dirty && !$v.email.email">邮箱格式不正确</span>

表单整体验证状态

在提交前检查整个表单的验证状态：

submitForm() {
  this.$v.$touch()
  if (this.$v.$invalid) {
    alert('请正确填写所有字段')
    return
  }
  // 提交逻辑
}

异步验证

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

validations: {
  username: {
    async isUnique(value) {
      if (value === '') return true
      const response = await api.checkUsername(value)
      return response.available
    }
  }
}

以上方法涵盖了 Vue 表单验证的主要场景，从基础验证到使用验证库，再到自定义和异步验证。根据项目复杂度可以选择合适的实现方式。