vue实现登录表单验证

表单结构设计

使用Vue的v-model双向绑定表单数据，结合<form>标签和@submit.prevent阻止默认提交行为。示例模板结构：

<template>
  <form @submit.prevent="handleSubmit">
    <div>
      <label>用户名</label>
      <input 
        v-model="form.username" 
        @blur="validate('username')"
      >
      <span v-if="errors.username">{{ errors.username }}</span>
    </div>

    <div>
      <label>密码</label>
      <input 
        type="password" 
        v-model="form.password"
        @blur="validate('password')"
      >
      <span v-if="errors.password">{{ errors.password }}</span>
    </div>

    <button type="submit">登录</button>
  </form>
</template>

数据与验证规则定义

在data或setup中定义表单数据和验证规则。使用响应式对象存储错误信息：

data() {
  return {
    form: {
      username: '',
      password: ''
    },
    errors: {
      username: '',
      password: ''
    },
    rules: {
      username: [
        { required: true, message: '用户名不能为空' },
        { min: 3, message: '用户名至少3个字符' }
      ],
      password: [
        { required: true, message: '密码不能为空' },
        { pattern: /^(?=.*[A-Za-z])(?=.*\d).{6,}$/, message: '需包含字母和数字且长度≥6' }
      ]
    }
  }
}

验证逻辑实现

创建验证方法，遍历规则数组进行逐项校验。对于复杂正则校验可使用test()方法：

methods: {
  validate(field) {
    const value = this.form[field]
    this.errors[field] = ''

    for (const rule of this.rules[field]) {
      if (rule.required && !value.trim()) {
        this.errors[field] = rule.message
        break
      }
      if (rule.min && value.length < rule.min) {
        this.errors[field] = rule.message
        break
      }
      if (rule.pattern && !rule.pattern.test(value)) {
        this.errors[field] = rule.message
        break
      }
    }
  },
  handleSubmit() {
    Object.keys(this.form).forEach(field => this.validate(field))
    const isValid = Object.values(this.errors).every(msg => !msg)
    if (isValid) {
      // 提交逻辑
    }
  }
}

实时验证优化

添加@input事件实现输入时实时验证，配合防抖提升性能：

<input 
  v-model="form.username"
  @input="debounceValidate('username')"
>

methods: {
  debounceValidate: _.debounce(function(field) {
    this.validate(field)
  }, 500)
}

第三方库集成

推荐使用vee-validate或element-ui的Form组件实现更复杂的验证：

// vee-validate示例
import { useField, useForm } from 'vee-validate'

const { handleSubmit } = useForm()
const { value: username, errorMessage: usernameError } = useField(
  'username',
  'required|min:3'
)

服务端验证反馈

处理API返回的验证错误，动态更新错误提示：

async handleSubmit() {
  try {
    await loginAPI(this.form)
  } catch (error) {
    if (error.response.status === 422) {
      this.errors = { ...this.errors, ...error.response.data.errors }
    }
  }
}