Vuelidate requiredUnless - 只需要填写一个输入
Vuelidate requiredUnless - Only one input is required to be filled in
我有三个输入 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') }
}
},
我解决了我的问题
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 !== ''
)
})
}
我有三个输入 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') }
}
},
我解决了我的问题
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 !== ''
)
})
}