vue实现登录表单验证

表单结构设计

使用Vue的v-model指令绑定表单数据，结合HTML5原生验证属性（如required、pattern）实现基础验证。表单通常包含用户名、密码等字段：

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

    <div>
      <label>密码</label>
      <input 
        v-model="form.password" 
        type="password" 
        required
        minlength="6"
        @blur="validateField('password')"
      >
      <span v-if="errors.password">{{ errors.password }}</span>
    </div>
    <button type="submit">登录</button>
  </form>
</template>

数据与验证逻辑

在Vue组件的data或setup中定义表单数据和错误信息对象，通过方法实现验证逻辑：

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      errors: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    validateField(field) {
      const value = this.form[field];
      if (!value) {
        this.errors[field] = '该字段不能为空';
        return false;
      }
      if (field === 'password' && value.length < 6) {
        this.errors[field] = '密码至少6位';
        return false;
      }
      this.errors[field] = '';
      return true;
    },
    handleSubmit() {
      const isValid = Object.keys(this.form).every(field => 
        this.validateField(field)
      );
      if (isValid) {
        console.log('提交数据:', this.form);
        // 调用API登录逻辑
      }
    }
  }
}
</script>

使用Vuelidate库

对于复杂验证场景，可引入轻量级验证库Vuelidate。安装后通过声明式规则定义验证：

npm install vuelidate

配置验证规则与组件：

import { required, minLength } from 'vuelidate/lib/validators';

export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  validations: {
    form: {
      username: { required },
      password: { required, minLength: minLength(6) }
    }
  },
  methods: {
    handleSubmit() {
      this.$v.$touch();
      if (!this.$v.$invalid) {
        console.log('验证通过');
      }
    }
  }
}

模板中通过$v对象显示错误：

<span v-if="$v.form.username.$error">用户名必填</span>
<span v-if="$v.form.password.$error">
  {{ $v.form.password.minLength ? '密码长度不足' : '密码必填' }}
</span>

实时反馈优化

通过计算属性或观察器实现输入时实时验证，提升用户体验：

watch: {
  'form.username'(value) {
    if (value) this.validateField('username');
  },
  'form.password'(value) {
    if (value) this.validateField('password');
  }
}

或添加输入事件触发验证：

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

样式与交互增强

结合CSS类动态反馈验证状态：

.error { color: red; }
.input-error { border-color: red; }

模板中动态绑定类：

<input 
  :class="{ 'input-error': errors.username }"
>
<span class="error">{{ errors.username }}</span>