使用动态验证模式验证 'required' 字段

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", "");

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

使用动态验证模式验证 'required' 字段

Validate a 'required' field using a dynamic validation schema

jquery

vue.js

validation

vuelidate