vant :rules="rules" 提交表单验证

vant是一款基于Vue.js的轻量级移动端UI组件库，它提供了丰富的组件和样式，可以帮助开发者快速构建高质量的移动端应用。其中，vant中表单组件提供了表单验证功能。

在vant中，可以通过设置rules属性来实现表单验证。这个属性是一个对象，其中每个键对应一个表单项的名称，值为一个数组，表示该表单项的验证规则。例如：

data() {
  return {
    form: {
      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: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
      ]
    }
  };
}

在上面的例子中，form对象中包含了两个表单项：username和password。而rules对象中，分别对这两个表单项设置了不同的验证规则，包括必填、长度限制等等。

除此之外，在提交表单时，还需要在form对象上调用validate方法进行整体验证。例如：

submitForm() {
  this.$refs.form.validate((valid) => {
    if (valid) {
      alert('提交成功');
    } else {
      alert('表单验证失败');
      return false;
    }
  });
}

上述代码中，$refs.form指向表单组件的ref属性，validate方法会对整个表单进行验证，并通过回调函数返回验证结果。如果验证成功，则可以进行表单提交操作，否则提示用户表单验证失败。