使用动态验证模式验证“必填”字段

Question

project_id 需要在表单提交时进行验证：

<td>
    <select2 
        name="project_id" 
        id="project_id"
        v-model.trim="item.project_id.$model"
        v-bind:class="{
            'is-invalid': item.project_id.$error,
            'is-valid':
            item.project_id.$dirty &&
            !item.project_id.$error,
        }"
    >
        <option value="">Select</option>
        <option v-for="(project) in projects" 
            :selected="project.id == timesheet.project_id" 
            :key="project.id" 
            :value="project.id"
        >{{ project.name }}
        </option>
    </select2>
</td>
<td><input type= "checkbox" name="disable" v-on:click="disabled()"></td>

<script>
    import { required, minLength } from "vuelidate/lib/validators";
    validations() {
        return{
            timesheet: {
                items: {
                    required,
                    minLength: minLength(1),
                    project_id: { required },
                }
            }
        }
    },
    disabled(){
        $('#project_id').attr('disabled', true);
    }
</script>

当disable复选框被选中时，如何使该字段成为非必填项？ 我尝试使用 requiredIf 验证器，但似乎在某处丢失：

            $each: {
                project_id: { 
                    required: requiredIf (function(item){
                        return this.disable
                    })
                },
            },

Answer 1

您可能尝试在 disable() 函数中执行以下操作：

document.getElementById("project_id").removeAttribute("required");
// or
document.getElementById("project_id").setAttribute("required", "");

要决定是否需要删除属性，您需要将v-model 属性应用于<input type= "checkbox" name="disable" v-on:click="disabled()">。如果选中此复选框，则其属性将变为 true，否则将变为 false。

---

编辑：这是一个完整的用法示例。

<template>
  <div>
    <select id="project_id" required>
      <option value="bar">Option 1</option>
      <option value="foo">Option 2</option>
      <option value="baz">Option 3</option>
    </select>
    <input type="checkbox" name="disable" v-model="clickedBox" @change="checkSelected">
  </div>
</template>

<script>
export default {
  data() {
    return {
      clickedBox: false
    }
  },
  methods: {
    checkSelected() {
      if (this.clickedBox === true) {
        document.getElementById("project_id").removeAttribute("required");
      }
      else {
        document.getElementById("project_id").setAttribute("required", "");
      }
    }
  }
}
</script>

如果选中该复选框project_id 将失去它的required 属性。如果未选中，required 属性将被重新设置。

---

EDIT2：使用动态验证架构

如果您想对project_id 使用动态验证架构，您需要像这样使用它：

validations() {
  if (!this.clickedBox) {
    return {
      timesheet: {
        items: {
          required,
          minLength: minLength(1),
          project_id: { required },
        }
      }
    }
  } else {
    return {
      timesheet: {
        items: {
          required,
          minLength: minLength(1),
          project_id: ''
        }
      }
    }
  }
}

有关详细信息，请参阅文档：Dynamic validation schema