vue.js如何写电话号码的校验

在 Vue.js 中，你可以通过使用自定义的验证规则或利用内置的 v-model 和 v-bind:rules 特性来实现电话号码的校验。这里提供一种常见的做法：

1. 定义一个自定义验证函数：

Vue.prototype.$validatePhoneNumber = function(phoneNumber) {
  const pattern = /^1[3-9]\d{9}$/; // 此处假设中国大陆手机号码格式，可根据实际需求调整正则表达式
  return pattern.test(phoneNumber);
};

这个函数会检查输入的电话号码是否符合指定的模式。

2. 在组件模板中，使用 `v-model` 绑定输入框，并添加一个 `v-bind:rules` 来应用自定义验证：

<input type="text" v-model="phoneNumber" :rules="{ phone: { validator: validatePhoneNumber, message: '请输入有效的电话号码' } }">

这里的 `:rules` 对象定义了一个验证规则，其中 `phone` 是一个字段名，`validator` 是我们之前定义的验证函数，`message` 则是在验证失败时显示的错误信息。

3. 在组件的 data 或 computed 属性里定义需要校验的数据：

data() {
  return {
    phoneNumber: ''
  };
},
methods: {
  submitForm() {
    if (!this.$refs.form.validate()) {
      console.log('验证失败');
      return;
    }
    // 提交表单...
  }
}

当你调用 `submitForm` 并验证表单时，如果电话号码校验未通过，不会触发提交操作。