vant校验手机号规则

vant是一个基于Vue.js的移动端UI框架，它提供了一系列的表单组件，其中就包括了用于校验手机号的组件。

要使用vant校验手机号规则，首先需要在代码中引入`mobile`校验规则，例如：

import { mobile } from 'vant/lib/validator';

然后，可以在需要校验手机号的表单组件中使用`rules`属性来指定校验规则，例如：

<van-field v-model="phone" label="手机号码" placeholder="请输入手机号码">
  <template #input-bottom>
    <van-field-error-message :show="phoneError">
      手机号码格式不正确
    </van-field-error-message>
  </template>
</van-field>

export default {
  data() {
    return {
      phone: '',
      phoneError: false,
    };
  },
  methods: {
    validatePhone() {
      if (!mobile(this.phone)) {
        this.phoneError = true;
      } else {
        this.phoneError = false;
      }
    },
  },
  watch: {
    phone() {
      this.validatePhone();
    },
  },
};

在上面的代码中，我们使用了`mobile`校验规则来检查用户输入的手机号是否正确，并将校验结果保存在`phoneError`变量中。如果`phoneError`为`true`，则显示错误提示信息。

需要注意的是，`mobile`校验规则只是简单地检查了手机号的格式是否正确，但并没有验证该手机号是否真实存在或是否被注册。在实际开发中，需要根据具体业务需求进行更严格的手机号校验和验证。