vue2 + vant2 提交表单验证

Vue2和Vant2都提供了一些常用的表单验证方法，可以轻松地实现表单提交前的验证。以下是一个简单的示例，展示如何使用Vue2和Vant2来实现表单提交前的验证：

1. 在Vue组件中定义表单数据和验证规则：

data() {
  return {
    formData: {
      username: '',
      password: ''
    },
    rules: {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 10, message: '用户名长度为3-10个字符', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 20, message: '密码长度为6-20个字符', trigger: 'blur' }
      ]
    }
  }
}

2. 在Vue模板中绑定表单数据和验证规则，并使用Vant2组件渲染表单元素：

<van-form
  v-model="formData"
  :rules="rules"
>
  <van-field
    v-model="formData.username"
    name="username"
    label="用户名"
    placeholder="请输入用户名"
    autocomplete="off"
    clearable
  />
  <van-field
    v-model="formData.password"
    name="password"
    label="密码"
    placeholder="请输入密码"
    type="password"
    autocomplete="off"
    clearable
  />
</van-form>

3. 在Vue组件中定义表单提交方法，并在该方法中调用Vant2的`validate`方法进行表单验证：

methods: {
  onSubmit() {
    this.$refs.form.validate(valid => {
      if (valid) {
        // 表单验证通过，执行表单提交操作
        // ...
      } else {
        // 表单验证不通过，给出提示信息
        Toast('请填写正确的信息')
      }
    })
  }
}

以上就是一个简单的Vue2 + Vant2表单提交验证的示例。需要注意的是，Vant2的`<van-form>`组件和`<van-field>`组件都提供了大量的属性和事件，可以根据实际需求进行灵活配置和使用。