vue3 + vant表单校验

Vue3结合Vant UI框架进行表单验证通常涉及以下几个步骤：

1. 安装依赖：首先需要安装`@vant/weapp`（Vant组件库）和`vue-formulate`（用于处理表单验证）。你可以通过npm或yarn命令行安装它们：

   npm install @vant/weapp vue-formulate
   # 或者
   yarn add @vant/weapp vue-formulate

2. 引入并配置：在Vue组件中导入`FormulateField`和相关的验证规则库，并设置默认的验证规则：

   import { useFormulate } from 'vue-formulate';
   
   export default {
     setup() {
       const { fields, errors } = useFormulate({
         rules: {
           username: { required: true, message: '请输入用户名' },
           password: { required: true, minLength: 6, message: '密码至少需要6位字符' },
         },
       });
       
       // ...
     }
   };

3. 使用Vant表单组件：在模板中使用`<van-field>`组件，并配合`v-model`指令绑定到`fields`对象的属性上，同时可以利用`errors`对象显示错误提示：

   <van-field v-model="fields.username" :rules="[fields.rules.username]" error-value></van-field>
   <van-field v-model="fields.password" :rules="[fields.rules.password]" error-value></van-field>
   
   <template #error>{{ errors.username }}</template> <!-- 显示用户名错误信息 -->
   <template #error>{{ errors.password }}</template> <!-- 显示密码错误信息 -->

4. 表单提交和验证：当用户点击提交按钮时，可以使用`validate`方法检查表单是否有效，然后处理提交操作：

   const handleSubmit = () => {
     if (fields.validate()) {
       // 表单有效，执行提交逻辑...
     } else {
       console.log('表单有误，请修复');
     }
   };