【问题标题】:Vuelidate requiredUnless - Only one input is required to be filled inVuelidate requiredUnless - 只需要填写一项
【发布时间】:2020-10-07 19:05:04
【问题描述】:

我有三个输入 jobApplyEmailjobApplyPhonejobApplyOther,我正在使用 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') }
        }
      },

【问题讨论】:

    标签: vue.js nuxt.js bootstrap-vue vuelidate


    【解决方案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 !== ''
            )
          })
        }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2021-08-12
      • 1970-01-01
      • 1970-01-01
      • 2016-06-11
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多