vue3实现手机号校验

在Vue3中实现手机号校验可以通过以下步骤：

1. 在你的Vue组件中，定义一个data属性来存储用户输入的手机号码，例如：

<template>
  <div>
    <input v-model="phone" placeholder="请输入手机号" />
    <button @click="checkPhone">校验</button>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      phone: '',
    });

    const checkPhone = () => {
      const phoneReg = /^[1][3-9][0-9]{9}$/;
      if (!phoneReg.test(state.phone)) {
        alert('请输入正确的手机号码');
      } else {
        alert('手机号码正确');
      }
    };

    return {
      ...state,
      checkPhone,
    };
  },
};
</script>

2. 在checkPhone函数中，定义一个正则表达式来匹配手机号码格式。这里我们使用的正则表达式是：`/^[1][3-9][0-9]{9}$/`，表示以数字1开头，第二位是3到9的数字，后面跟着9个数字。

3. 使用test方法来检查用户输入的手机号码是否匹配正则表达式。如果不匹配，则弹出提示信息，否则提示手机号码正确。

4. 在模板中，使用v-model指令来绑定用户输入的手机号码到state.phone属性上。在按钮的click事件中调用checkPhone函数来触发手机号码校验。

通过以上步骤，就可以在Vue3中实现手机号码校验了。