BootstrapVue的b-dropdown下拉框必填客户端校验不生效如何解决？

问题根因 #

• BootstrapVue的b-dropdown是封装的下拉菜单组件，不是原生<select>表单控件，原生required、aria-required属性不会触发浏览器默认表单校验，完全需要依赖手动逻辑实现校验
• 你的代码存在2个逻辑问题导致Vuelidate不生效：
  1. b-dropdown本身不支持v-model绑定，你给它绑定的$v.clientData.selectedOption.$model完全不会生效，你点击选项时直接修改clientData.selectedOption没有通知Vuelidate更新校验状态
  2. required校验规则判断的是值是否非空，你初始值设为'Choose data type'字符串属于非空值，所以required校验会直接通过，仅靠自定义规则需要配合正确的校验触发时机才行

修复方案 #

方案1（推荐）：调整默认值结构，简化校验逻辑 #

把默认选中值设为null，直接复用required校验规则，无需自定义校验：

模板代码

<b-dropdown id="clientData"
            name="clientData"
            :text="selectedOptionText"
            class="m-2 col-2" 
            no-flip>
  <b-dropdown-item v-for="option in clientData.options"
                    :key="option.value"
                    :value="option.value"
                    @click="selectOption(option.value)">
    {{option.text}}
  </b-dropdown-item>
</b-dropdown>
<!-- 校验错误提示 -->
<div v-if="$v.clientData.selectedOption.$invalid && $v.clientData.selectedOption.$touched" class="text-danger small mt-1">
  * 请选择一个数据类型
</div>

Script代码

import { required } from 'vuelidate/lib/validators'

export default {
  data () {
    return {
      clientData: {
        csvFile: null,
        selectedOption: null, // 初始值改为null，触发required校验
        options: [
          {
            value: 'PhoneNumber',
            text: 'Phone Number'
          },
          {
            value: 'Email',
            text: 'Email'
          },
          {
            value: 'DeviceToken',
            text: 'Device Token'
          }
        ]
      }
    }
  },
  computed: {
    // 动态计算下拉框显示文本
    selectedOptionText() {
      if (!this.clientData.selectedOption) return 'Choose data type'
      return this.clientData.options.find(opt => opt.value === this.clientData.selectedOption)?.text || 'Choose data type'
    }
  },
  validations: {
    clientData: {
      selectedOption: {
        required // 直接用required即可，不用自定义校验
      }
    }
  },
  methods: {
    selectOption(val) {
      this.clientData.selectedOption = val
      // 手动触发该字段的Vuelidate校验
      this.$v.clientData.selectedOption.$touch()
    },
    submitForm() {
      // 提交前先触发全量校验
      this.$v.$touch()
      // 校验不通过直接终止提交
      if (this.$v.$invalid) return
      // 校验通过后再执行后续服务端请求逻辑
    }
  }
}

方案2：保留原有默认值逻辑 #

如果你不想修改初始值为'Choose data type'的原有逻辑，只需要补充Vuelidate的触发逻辑即可：

• 在点击选项赋值后调用this.$v.clientData.selectedOption.$touch()触发校验
• 表单提交前调用this.$v.$touch()做全量校验，判断$v.$invalid状态拦截提交

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