vue前端校验手机号格式代码

在vue中校验手机号格式可以使用正则表达式进行判断，代码如下：

// 定义手机号校验的正则表达式
const phoneReg = /^1[3-9]\d{9}$/;

// 在vue的methods中定义校验手机号的方法
methods: {
  // 校验手机号格式
  checkPhone(phone) {
    return phoneReg.test(phone);
  }
}

在模板中可以通过v-model绑定手机号码输入框的值，并在提交表单时调用checkPhone方法进行校验，如下：

<template>
  <div>
    <input type="tel" v-model="phone">
    <button @click="submit">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: ''
    }
  },
  methods: {
    // 校验手机号格式
    checkPhone(phone) {
      const phoneReg = /^1[3-9]\d{9}$/;
      return phoneReg.test(phone);
    },
    // 提交表单
    submit() {
      if (!this.checkPhone(this.phone)) {
        alert('请输入正确的手机号码');
        return;
      }
      // 提交表单逻辑
    }
  }
}
</script>