vue3电话号码校验

在Vue3中，对于电话号码的验证通常会涉及到自定义的表单验证规则，可以利用`vuelidate`、`vue-validator`这样的第三方库或者直接在组件的`methods`中编写函数来实现。这里是一个基本的例子：

首先，你需要安装相应的库，比如`vuelidate`：

npm install vuelidate

然后，在你的Vue组件中引入并配置验证规则：

import { required, isNumeric } from 'vuelidate/lib/validators';

const validationRules = {
  phoneNumber: {
    required,
    isNumeric: { message: '请输入有效的手机号码' }
  }
};

export default {
  // ...
  validations: {
    form: validationRules
  },
  methods: {
    validatePhoneNumber(phone) {
      this.$v.form.phoneNumber.$touch();
      return this.$v.form.phoneNumber;
    }
  }
};

在模板里，你可以这样使用：

<input type="tel" v-model="phoneNumber" @blur="validatePhoneNumber(phoneNumber)">
<div v-if="$v.form.phoneNumber.$error">手机号码无效</div>

当用户输入并离开输入框后，`validatePhoneNumber`方法会被触发，如果电话号码不符合规则，错误消息将会显示。