vant-form写一个登录页面

Vant是一个轻量级的移动前端组件库，其中`vant-form`模块主要用于构建表单验证和数据处理。下面是一个简单的Vant登录页面示例，使用了`Form`、`Input` 和 `Button` 组件：

<template>
  <div class="login-page">
    <van-form ref="form" :submit-method="handleSubmit">
      <van-input v-model="username" placeholder="用户名" name="username" @blur="validateUsername"></van-input>
      <van-input type="password" v-model="password" placeholder="密码" name="password" @blur="validatePassword"></van-input>
      
      <van-button type="primary" size="small" @click="handleSubmit">登录</van-button>
      <!-- 提示信息 -->
      <van-field-error v-if="errors.username">{{ errors.username }}</van-field-error>
      <van-field-error v-if="errors.password">{{ errors.password }}</van-field-error>
    </van-form>
  </div>
</template>

<script>
import { Form, Input, Button } from 'vant';

export default {
  components: {
    Form,
    Input,
    Button
  },
  data() {
    return {
      username: '',
      password: '',
      errors: {},
    };
  },
  methods: {
    handleSubmit(e) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 此处可以发送登录请求
          console.log('提交成功');
        } else {
          // 验证失败，阻止默认行为并显示错误提示
          e.preventDefault();
          this.errors = this.$refs.form.getErrors();
        }
      });
    },
    validateUsername() {
      // 自定义验证规则，例如检查是否为空
      const isUsernameValid = !this.username.trim().length;
      this.errors.username = isUsernameValid ? '' : '请输入用户名';
    },
    validatePassword() {
      // 同理，这里可以添加密码校验规则
      const isPasswordValid = this.password.length >= 6; // 简单示例，实际应用中应更复杂
      this.errors.password = isPasswordValid ? '' : '密码太短';
    },
  },
};
</script>

在这个例子中，`validateUsername` 和 `validatePassword` 方法用于自定义输入框的验证，当用户离开输入框时触发。`handleSubmit` 方法会在表单提交时进行整体验证。