Vue/Vuetify：如何为每个Chip项做Vee-Validate验证而非整个Select输入

我懂你现在的需求：原来的代码只是对整个手机号输入框做了必填和数字验证，但你希望每个添加的Chip（也就是每个手机号）都单独符合9-15位数字的规则。下面是具体的实现方案，我会一步步拆解清楚：

核心思路 #

因为Vee-Validate默认是绑定单个表单控件的，而这里的v-select绑定的是数组，所以我们需要：

• 自定义一个验证规则，专门检查单个手机号的长度范围和数字格式
• 在添加/删除手机号时实时验证，或者提交时遍历数组逐个校验
• 把错误信息和对应的Chip关联，让用户能直观看到哪个号码有问题

修改后的完整代码 #

模板部分

<v-select 
  class="elevation-0 mt-border-bottom" 
  v-model="PhoneNumber" 
  label="Add phone number" 
  chips 
  tags 
  solo 
  prepend-icon="phone" 
  clearable 
  @input="validateAllNumbers"
>
  <template slot="selection" slot-scope="data">
    <v-chip 
      close 
      outline 
      dark 
      @input="remove(data.item)" 
      :selected="data.selected"
      :class="{'error--text': isNumberInvalid(data.item)}"
    >
      <strong>{{ data.item }}</strong>
      <!-- 可选：在Chip旁显示错误提示 -->
      <span v-if="isNumberInvalid(data.item)" class="ml-1 text-xs">格式错误</span>
    </v-chip>
  </template>
  <!-- 汇总显示所有错误号码 -->
  <v-alert v-if="invalidNumbers.length" type="error" dense>
    以下手机号不符合要求（需9-15位数字）：{{ invalidNumbers.join(', ') }}
  </v-alert>
</v-select>

脚本部分

export default {
  data () {
    return {
      PhoneNumber: [],
      invalidNumbers: [] // 存储验证失败的手机号
    }
  },
  created() {
    // 自定义验证规则：检查手机号是9-15位数字
    this.$validator.extend('validPhone', {
      validate: value => {
        const numStr = value.trim();
        // 验证是纯数字且长度在9-15之间
        return /^\d{9,15}$/.test(numStr);
      },
      message: '手机号必须是9-15位纯数字'
    });
  },
  methods: {
    // 遍历所有号码做验证，更新错误列表
    validateAllNumbers() {
      this.invalidNumbers = [];
      this.PhoneNumber.forEach(phone => {
        const isValid = this.$validator.validate('validPhone', phone);
        if (!isValid) {
          this.invalidNumbers.push(phone);
        }
      });
    },
    // 判断单个号码是否验证失败
    isNumberInvalid(phone) {
      return this.invalidNumbers.includes(phone);
    },
    // 移除号码时同步更新错误列表
    remove(item) {
      const numIndex = this.PhoneNumber.indexOf(item);
      if (numIndex > -1) {
        this.PhoneNumber.splice(numIndex, 1);
        // 从错误列表中移除该号码
        const errorIndex = this.invalidNumbers.indexOf(item);
        if (errorIndex > -1) {
          this.invalidNumbers.splice(errorIndex, 1);
        }
      }
    },
    async submitNewNumber () {
      // 先执行全量验证更新错误列表
      this.validateAllNumbers();
      if (this.invalidNumbers.length > 0) {
        console.log('存在格式错误的手机号');
        return false;
      }
      // 可选：结合Vee-Validate全局验证做双重保障
      const isValid = await this.$validator.validateAll();
      if (isValid) {
        console.log('所有手机号验证通过，提交成功');
        // 这里写你的提交逻辑
      } else {
        console.log('验证未通过，请检查所有手机号');
        return false;
      }
    }
  }
}

关键细节说明 #

1. 自定义验证规则：通过this.$validator.extend创建了validPhone规则，用正则表达式直接验证手机号格式，简洁高效。
2. 实时反馈：监听v-select的@input事件，每次添加或删除号码时自动校验所有项，把错误号码存入invalidNumbers数组。
3. 视觉提示：给验证失败的Chip添加红色文字样式，还可以在Chip旁显示小提示，同时用v-alert汇总所有错误号码，用户一眼就能看到问题。
4. 提交校验：提交前先更新错误列表，若有错误直接终止提交；也可以结合Vee-Validate的全局验证，确保没有遗漏。

这样就能实现每个Chip项的单独验证啦，你可以根据自己的UI需求调整错误提示的样式和位置~

内容的提问来源于stack exchange，提问作者Fabio Zanchi