vue 实现输入验证

表单输入验证实现

在Vue中实现输入验证可以通过内置指令、第三方库或自定义验证逻辑完成。以下是几种常见方法：

使用v-model和计算属性 通过v-model绑定输入值，结合计算属性或方法进行验证：

data() {
  return {
    username: '',
    email: ''
  }
},
computed: {
  isUsernameValid() {
    return this.username.length >= 3
  },
  isEmailValid() {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    return re.test(this.email)
  }
}

VeeValidate库 安装VeeValidate后可以快速实现复杂验证：

import { ValidationProvider, extend } from 'vee-validate'
import { required, email } from 'vee-validate/dist/rules'

extend('required', required)
extend('email', email)

// 模板中使用
<ValidationProvider rules="required|email" v-slot="{ errors }">
  <input v-model="email" type="text">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

自定义验证指令

创建全局验证指令处理特定验证场景：

Vue.directive('phone', {
  bind(el, binding, vnode) {
    el.addEventListener('input', () => {
      const isValid = /^[0-9]{10,11}$/.test(el.value)
      if (!isValid) {
        el.classList.add('error')
      } else {
        el.classList.remove('error')
      }
    })
  }
})

表单提交验证

在提交表单时集中验证所有字段：

methods: {
  validateForm() {
    this.errors = {}

    if (!this.username) {
      this.errors.username = '用户名必填'
    }

    if (!this.email.includes('@')) {
      this.errors.email = '邮箱格式错误'
    }

    return Object.keys(this.errors).length === 0
  },
  onSubmit() {
    if (this.validateForm()) {
      // 提交逻辑
    }
  }
}

实时验证反馈

结合CSS类提供即时视觉反馈：

.input-error {
  border-color: #ff3860;
}
.error-message {
  color: #ff3860;
  font-size: 0.8rem;
}

<input 
  v-model="username"
  :class="{ 'input-error': !isUsernameValid }">
<p 
  v-if="!isUsernameValid" 
  class="error-message">
  用户名至少3个字符
</p>

以上方法可根据项目需求组合使用，VeeValidate适合复杂表单场景，自定义指令适合特定验证规则，而基础验证适合简单表单。