Vuelidate requiredUnless - 只需要填写一项

Posted 2023-02-22

【中文标题】Vuelidate requiredUnless - 只需要填写一项

【英文标题】：Vuelidate requiredUnless - Only one input is required to be filled in

【发布时间】：2020-10-07 19:05:04

【问题描述】：

我有三个输入 jobApplyEmail、jobApplyPhone、jobApplyOther，我正在使用 Vuelidate 进行验证。在这三个输入中，用户需要输入至少一个输入。为此，我使用requiredUnless，但由于某种原因它无法正常工作。

模板重复

    // Using bootstrap-vue
    <b-form-input
      id="jobApplyEmail"
      v-model="form.jobApplyEmail"
      type="email"
      :class=" 'is-invalid': $v.form.jobApplyEmail.$error "
      @blur="$v.form.jobApplyEmail.$touch()">
    </b-form-input>

脚本

    import 
      required,
      email,
      requiredUnless
     from 'vuelidate/lib/validators'
    data() 
        return 
          form: 
            jobApplyEmail: '',
            jobApplyPhone: '',
            jobApplyOther: ''
          ,
        
      ,
    computed: 
        isOptional: () => 
          return (
            this.jobApplyEmail !== '' ||
            this.jobApplyOther !== '' ||
            this.jobApplyPhone !== ''
          )
        
      ,
    
    validations: 
        form: 
          jobApplyEmail:  required: requiredUnless('isOptional'), email ,
          jobApplyOther:  required: requiredUnless('isOptional') ,
          jobApplyPhone:  required: requiredUnless('isOptional') 
        
      ,

【参考方案1】：

我解决了我的问题

    jobApplyEmail: 
      requiredIf: requiredUnless(function() 
        return (
          this.form.jobApplyPhone !== '' || this.form.jobApplyOther !== ''
        )
      ),
      email
    ,

    jobApplyPhone: 
      requiredIf: requiredUnless(function() 
        return (
          this.form.jobApplyOther !== '' || this.form.jobApplyEmail !== ''
        )
      )
    ,
    jobApplyOther: 
      requiredIf: requiredUnless(function() 
        return (
          this.form.jobApplyPhone !== '' || this.form.jobApplyEmail !== ''
        )
      )