vue实现部分表单校验

Vue 表单部分校验实现方法

使用 v-model 和计算属性

在 Vue 中可以通过 v-model 绑定表单元素的值，结合计算属性或方法对特定字段进行校验。

<template>
  <input v-model="username" @blur="validateUsername">
  <span v-if="usernameError">{{ usernameError }}</span>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      usernameError: ''
    }
  },
  methods: {
    validateUsername() {
      if (this.username.length < 3) {
        this.usernameError = '用户名至少3个字符'
      } else {
        this.usernameError = ''
      }
    }
  }
}
</script>

使用 VeeValidate 库

VeeValidate 提供了更强大的表单验证功能，可以轻松实现部分字段验证。

<template>
  <ValidationProvider rules="required|min:3" v-slot="{ errors }">
    <input v-model="username">
    <span>{{ errors[0] }}</span>
  </ValidationProvider>
</template>

<script>
import { ValidationProvider } from 'vee-validate'

export default {
  components: {
    ValidationProvider
  },
  data() {
    return {
      username: ''
    }
  }
}
</script>

动态表单验证

对于需要动态控制验证的字段，可以使用条件判断来控制验证逻辑。

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

  <button @click="submitForm">提交</button>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      emailError: '',
      shouldValidateEmail: false
    }
  },
  methods: {
    validateEmail() {
      if (!this.shouldValidateEmail) return

      const re = /\S+@\S+\.\S+/
      if (!re.test(this.email)) {
        this.emailError = '请输入有效的邮箱地址'
      } else {
        this.emailError = ''
      }
    },
    submitForm() {
      this.shouldValidateEmail = true
      this.validateEmail()

      if (!this.emailError) {
        // 提交表单
      }
    }
  }
}
</script>

组合式 API 实现

在 Vue 3 中可以使用组合式 API 封装验证逻辑。

<template>
  <input v-model="form.password" @blur="validatePassword">
  <span v-if="errors.password">{{ errors.password }}</span>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const form = reactive({
      password: ''
    })

    const errors = reactive({
      password: ''
    })

    const validatePassword = () => {
      if (form.password.length < 6) {
        errors.password = '密码至少6个字符'
      } else {
        errors.password = ''
      }
    }

    return {
      form,
      errors,
      validatePassword
    }
  }
}
</script>

异步验证处理

对于需要后端验证的字段，可以使用异步验证方法。

methods: {
  async checkUsernameUnique() {
    try {
      const res = await axios.get('/api/check-username', {
        params: { username: this.username }
      })
      if (!res.data.available) {
        this.usernameError = '用户名已存在'
      }
    } catch (error) {
      console.error(error)
    }
  }
}

以上方法可以根据实际需求选择使用，Vue 的响应式系统使得表单验证变得灵活且易于实现。对于复杂表单，建议使用专门的验证库如 VeeValidate 或 Element UI 的表单组件。