Vuelidate 0.7.6版本表单select下拉选择框提交校验失败问题

问题根因 #

你代码存在两个核心错误导致校验异常：

1. 校验字段与绑定字段不匹配：Vuelidate配置中声明的校验字段是family，但下拉框v-model绑定的是familyId，Vuelidate无法读取到你实际选中的值，所以一直触发校验失败。
2. 默认空选项值不符合预期：你给默认占位选项设置的value="null"是字符串类型的"null"，不是真实的空值，会导致空选时required校验判断逻辑异常。

修复方案 #

第一步：统一校验字段与绑定字段 #

二选一修改即可：

• 方案A：把Vuelidate的校验字段改为familyId，对应修改模板中所有$v.family的引用为$v.familyId
• 方案B：把下拉框的v-model="familyId"改为v-model="family"

第二步：修改默认占位选项的value值 #

将默认option的value="null"改为:value="null"（加冒号绑定为真实的null值），如果你的业务逻辑中有效id都是数字类型，也可以绑定为0或者空字符串，和你required的校验规则匹配即可。

修改后完整代码示例 #

HTML部分

<div class="col-md-4">
  <label for="exampleFormControlS1">Famille:</label>
  <select
    class="form-control form-control-sm mt-2"
    id="exampleFormControlSelect1"
    name="family"
    v-model="family"
    @change="onChange($event)"
    :class="{
      'is-invalid': $v.family.$error,
      'is-valid': !$v.family.$invalid,
    }"
  >
    <option :value="null">- -- -</option>
    <option
      v-for="lineItem in familyListe"
      :key="lineItem.id"
      :value="lineItem.id"
    >
      {{ lineItem.name }}
    </option>
  </select>
  <div class="invalid-feedback">
    <span v-if="!$v.family.required">Famille requise</span>
  </div>
</div>

校验配置部分（选择方案B时保持不变即可）

validations: {
  family: {
    required,
  },
}

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