vue实现简单登录验证

实现登录表单基础结构

使用Vue的模板语法构建登录表单，包含用户名和密码输入框及提交按钮。表单需绑定v-model实现双向数据绑定，并监听submit事件。

<template>
  <form @submit.prevent="handleSubmit">
    <div>
      <label for="username">用户名</label>
      <input 
        type="text" 
        id="username" 
        v-model="form.username"
        @blur="validateUsername"
      >
      <span class="error" v-if="errors.username">{{ errors.username }}</span>
    </div>
    <div>
      <label for="password">密码</label>
      <input 
        type="password" 
        id="password" 
        v-model="form.password"
        @blur="validatePassword"
      >
      <span class="error" v-if="errors.password">{{ errors.password }}</span>
    </div>
    <button type="submit">登录</button>
  </form>
</template>

设置数据模型与验证规则

在Vue组件中定义表单数据和错误消息的响应式对象，包含基础验证方法。使用ref或reactive创建响应式数据，验证逻辑应返回布尔值。

<script setup>
import { reactive } from 'vue';

const form = reactive({
  username: '',
  password: ''
});

const errors = reactive({
  username: '',
  password: ''
});

const validateUsername = () => {
  if (!form.username.trim()) {
    errors.username = '用户名不能为空';
    return false;
  }
  errors.username = '';
  return true;
};

const validatePassword = () => {
  if (!form.password) {
    errors.password = '密码不能为空';
    return false;
  }
  if (form.password.length < 6) {
    errors.password = '密码长度至少6位';
    return false;
  }
  errors.password = '';
  return true;
};
</script>

处理表单提交逻辑

创建提交处理方法，在提交前验证所有字段。通过every方法检查所有验证是否通过，验证通过后可执行API请求等后续操作。

const handleSubmit = () => {
  const isValid = [validateUsername(), validatePassword()].every(Boolean);
  if (!isValid) return;

  // 模拟API请求
  console.log('提交数据:', form);
  alert(`欢迎, ${form.username}!`);
};

添加实时输入验证

在输入框上添加@input事件实现边输入边验证，提升用户体验。注意避免频繁验证导致的性能问题，可考虑使用防抖。

<input 
  type="text"
  id="username"
  v-model="form.username"
  @blur="validateUsername"
  @input="validateUsername"
>

样式优化（可选）

通过CSS为错误消息添加视觉反馈，使用Vue的class绑定动态控制错误状态。

.error {
  color: red;
  font-size: 0.8em;
  margin-left: 5px;
}

input.invalid {
  border-color: red;
}

<input 
  :class="{ invalid: errors.username }"
  type="text"
  id="username"
  v-model="form.username"
>

完整组件示例

整合所有代码的完整单文件组件示例：

<template>
  <form @submit.prevent="handleSubmit">
    <div>
      <label for="username">用户名</label>
      <input 
        :class="{ invalid: errors.username }"
        type="text" 
        id="username" 
        v-model="form.username"
        @blur="validateUsername"
        @input="validateUsername"
      >
      <span class="error" v-if="errors.username">{{ errors.username }}</span>
    </div>
    <div>
      <label for="password">密码</label>
      <input 
        :class="{ invalid: errors.password }"
        type="password" 
        id="password" 
        v-model="form.password"
        @blur="validatePassword"
        @input="validatePassword"
      >
      <span class="error" v-if="errors.password">{{ errors.password }}</span>
    </div>
    <button type="submit">登录</button>
  </form>
</template>

<script setup>
import { reactive } from 'vue';

const form = reactive({
  username: '',
  password: ''
});

const errors = reactive({
  username: '',
  password: ''
});

const validateUsername = () => {
  if (!form.username.trim()) {
    errors.username = '用户名不能为空';
    return false;
  }
  errors.username = '';
  return true;
};

const validatePassword = () => {
  if (!form.password) {
    errors.password = '密码不能为空';
    return false;
  }
  if (form.password.length < 6) {
    errors.password = '密码长度至少6位';
    return false;
  }
  errors.password = '';
  return true;
};

const handleSubmit = () => {
  const isValid = [validateUsername(), validatePassword()].every(Boolean);
  if (!isValid) return;
  alert(`欢迎, ${form.username}!`);
};
</script>

<style scoped>
.error {
  color: red;
  font-size: 0.8em;
}
input.invalid {
  border-color: red;
}
</style>