rules校验禁止输入8位9位

如果要使用 Vue 的表单验证规则 rules 来禁止输入 8 位或 9 位，可以使用正则表达式来实现。具体实现如下：

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

<script>
export default {
  data() {
    return {
      input: '',
      errors: {},
      rules: [
        {
          pattern: /^(?!.*[89]).*$/,
          message: '不能输入 8 或 9',
        },
      ],
    };
  },
  methods: {
    submit() {
      const errors = {};
      if (Object.keys(errors).length > 0) {
        this.errors = errors;
        return;
      }
      // 表单提交逻辑
      console.log('提交成功');
    },
  },
};
</script>

在这个例子中，我们使用了 v-model 指令将 input 标签绑定到组件的 input 属性上。然后，我们在 data 中定义了 rules 数组，其中包含了一个 pattern 属性和一个 message 属性。pattern 属性是一个正则表达式，表示禁止输入 8 或 9，message 属性是一个错误提示信息。最后，在模板中，我们将 rules 数组绑定到 input 标签的 rules 属性上。

在 submit 方法中，我们可以在表单提交前先对 input 进行校验。如果校验失败，则将错误信息保存到 errors 对象中，否则提交表单。在模板中，我们根据 errors 对象中是否有错误信息来显示错误提示。