vue限制输入框只能7位或11位利用rules

可以使用 Vue 的表单验证规则 rules 来限制输入框只能输入 7 位或 11 位。具体实现如下：

<template>
  <div>
    <form>
      <label for="phone">请输入手机号：</label>
      <input type="text" id="phone" v-model="phone" />
      <br />
      <span v-if="errors.phone">{{ errors.phone }}</span>
      <br />
      <button type="submit" @click.prevent="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: '',
      errors: {},
    };
  },
  methods: {
    validatePhone() {
      if (!this.phone) {
        return '手机号不能为空';
      }
      if (!/^1\d{10}$/.test(this.phone)) {
        return '手机号格式不正确';
      }
      if (this.phone.length !== 7 && this.phone.length !== 11) {
        return '手机号长度必须为7位或11位';
      }
      return '';
    },
    submit() {
      const errors = {};
      const phoneError = this.validatePhone();
      if (phoneError) {
        errors.phone = phoneError;
      }
      if (Object.keys(errors).length > 0) {
        this.errors = errors;
        return;
      }
      // 表单提交逻辑
      console.log('提交成功');
    },
  },
};
</script>

在这个例子中，我们使用了 v-model 指令将 input 标签绑定到组件的 phone 属性上。然后，在 validatePhone 方法中，我们检查手机号是否为空、是否符合格式要求、是否为 7 位或 11 位长度。最后，我们在 submit 方法中调用 validatePhone 方法来验证手机号，如果验证失败，则将错误信息保存到 errors 对象中，否则提交表单。

在模板中，我们使用 v-if 指令根据 errors 对象中是否有错误信息来显示错误提示。在按钮的 click 事件中，我们调用 submit 方法来提交表单。如果表单验证失败，则不会提交表单，而是显示错误提示。否则，我们可以在 submit 方法中编写表单提交的逻辑。