vue 电话号码提交校验

你可以使用正则表达式来校验电话号码格式是否正确，以下是一个基本的 Vue 组件示例：

<template>
  <div>
    <label for="phone">电话号码：</label>
    <input type="text" id="phone" v-model="phone">
    <button @click="submit">提交</button>
    <span v-if="!isValidPhone">请输入正确的电话号码</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: '',
    };
  },
  computed: {
    // 判断电话号码格式是否正确
    isValidPhone() {
      const reg = /^1[3456789]\d{9}$/;
      return reg.test(this.phone);
    },
  },
  methods: {
    submit() {
      if (!this.isValidPhone) {
        alert('请输入正确的电话号码');
        return;
      }
      // 处理提交逻辑
    },
  },
};
</script>

在上面的示例中，我们使用了正则表达式 `^1[3456789]\d{9}$` 来校验电话号码格式，它可以匹配以数字 1 开头，第二位为 3、4、5、6、7、8、9 中的任意一个，后面跟着 9 位数字的电话号码。在 computed 属性中，我们定义了一个 `isValidPhone` 计算属性来判断电话号码是否符合格式要求，并在模板中使用 `v-if` 指令来根据计算属性的结果判断是否显示错误提示信息。在 `submit` 方法中，我们首先判断电话号码是否符合格式要求，如果不符合则弹出提示框，否则继续处理提交逻辑。