vant4.0 form 表单校验

Vant 4.0 的 Form 组件是一个用于处理表单验证的强大工具。它提供了一套易于使用的 API 和丰富的选项，使得开发者能够轻松地创建并管理各种类型的表单输入，包括必填项、正则表达式验证、自定义验证规则等。

以下是 Vant Form 表单校验的基本步骤：

1. 安装 Vant UI 及其 Form 组件：首先，需要通过 npm 或 yarn 将 Vant 版本升级到 4.x，并安装 `vant-form` 包。

   npm install vant vant-form --save

2. 引入组件：在 Vue 项目中导入 `Form` 组件和其他相关的验证规则模块。

import { Form, Field, Rule } from 'vant';

3. 创建表单结构：使用 `<form>` 标签配合 `Field` 组件定义各个字段。

<template>
  <Form ref="form" :model="formData">
    <Field name="username" v-model="formData.username" placeholder="请输入用户名" rules="[required]"></Field>
    <!-- 其他输入字段 -->
  </Form>
</template>

4. 验证规则设置：利用 `rules` 属性和 `Rule` 构造函数设置验证规则，如必填项(`required`)、邮箱格式验证等。

5. 触发验证：当用户提交表单时，可以调用 `Form` 的 `validate` 方法，或者在 `@submit` 事件中触发验证。

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        email: ''
      },
      rules: {
        username: [{ type: 'string', required: true, message: '用户名不能为空' }],
        email: [{ type: 'email', required: true, message: '邮箱格式错误' }]
      }
    };
  },
  methods: {
    handleSubmit(e) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 提交数据...
        } else {
          console.log('表单验证失败');
        }
      });
    }
  }
};
</script>