vant的全局表单校验

Vant是一个流行的轻量级移动UI库，其中包含了一个强大的表格组件`van-form`，支持全局表单验证功能。在使用Vant的全局表单校验时，你可以按照以下步骤操作：

1. 引入依赖：首先，在项目中引入Vant的`van-form`和`van-field`组件。

<script src="https://unpkg.com/vant/dist/vant.min.js"></script>

2. 创建表单：创建一个包含`<van-field>`元素的表单，这些元素会被`van-form`自动校验。

<form ref="form">
  <van-field v-model="name" placeholder="请输入姓名" :rules="[required]"></van-field>
  <!-- 更多的van-field... -->
</form>

`:rules="[required]"`表示该字段是必填的，`required`是预定义的校验规则。

3. 定义验证规则：你可以自定义更复杂的验证规则，如正则表达式、长度限制等，并将其传递给`rules`属性。

4. 启用全局校验：在`van-form`上使用`ref`属性，并通过JavaScript监听`submit`事件或`validate`方法来执行全局校验。

export default {
  data() {
    return {
      name: '',
      // 更多的字段...
    };
  },
  mounted() {
    this.$refs.form.validate((valid) => {
      if (valid) {
        console.log('表单提交前验证成功');
      } else {
        console.log('表单提交前有错误');
      }
    });
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 提交表单
        }
      });
    },
  },
};