VueJ 2.0에서 vee-validate를 사용하는 두 필드 중 하나 이상 필요

VueJ 2.0에서 vee-validate를 사용하는 두 필드 중 하나 이상 필요

vee-validate를 사용하고 있으며, 2개의 필드가 있습니다.하나는 집전화용이고 다른 하나는 휴대전화용입니다.규칙에 대해 둘 다 '필수'로 만들 필요는 없지만, 최소한 둘 중 하나가 필요합니다.

그래서 질문입니다만, 두 필드 중 적어도 하나에서 입력을 확인하는 규칙을 설정할 수 있습니까?

좋아, 오래 걸리진 않았지만 난 이걸 할 수 있어조금 파헤쳤기 때문에 다른 사람들에게 도움이 될 수 있도록 제 답을 올려주세요.

먼저 입력 필드는homephone그리고.cellphone그 중 적어도 하나는 필요합니다.

Vue에서 계산된 속성을 다음과 같이 사용하여 이 작업을 수행할 수 있습니다.

computed: {
    isHomePhoneRequired() {
        if(this.cellphone === '')
            return true; // homephone is required
        return false;
    },
    isCellPhoneRequired() {
        // check if homephone is empty
        if(this.homephone === '')
            return true; // cellphone is required
        return false;
    }
}

HTML은 다음과 같습니다.

<div class="form-group" :class="{'has-error': errors.has('homephone') }">
    <div class="label">Home Phone<i class="fa fa-asterisk required" aria-hidden="true"></i></div>
    <div ><input type="text" class="form-control" v-model="homephone" v-validate ="{ rules: { required: this.isHomePhoneRequired} }" data-vv-name="homephone" data-vv-as="Home Phone" /></div>
    <p class="text-danger" v-if="errors.has('homephone')">{{ errors.first('homephone') }}</p>
</div>
<div class="form-group" :class="{'has-error': errors.has('cellphone') }">
    <div class="label">Cell Phone<i class="fa fa-asterisk required" aria-hidden="true"></i></div>
    <div ><input type="text" class="form-control" v-model="cellphone" v-validate ="{ rules: { required: this.isCellPhoneRequired} }" data-vv-name="cellphone" data-vv-as="Cell Phone" /></div>
    <p class="text-danger" v-if="errors.has('cellphone')">{{ errors.first('cellphone') }}</p>
</div>

이제 v-validate가 유형을 포함하는 전달된 개체를 가져옵니다().rules, 사용하는 검증(required및 계산된 속성(isHomePhoneRequired).

계산은 필요없다고 생각합니다만, 아래와 같이 다른 입력 모델의 룰을 검증하는 조건을 체크하는 것으로, HTML 자체에서 간단하게 실시할 수 있습니다.

        <div class="form-group" :class="{'has-error': errors.has('homephone') }">
            <div class="label">Home Phone<i class="fa fa-asterisk required" aria-hidden="true"></i></div>
            <div ><input type="text" v-validate ="{ rules: { required: cellphone?false:true} }" class="form-control" v-model="homephone" data-vv-name="homephone" data-vv-as="Home Phone" /></div>
            <p class="text-danger" v-if="errors.has('homephone')">{{ errors.first('homephone') }}</p>
        </div>
        <div class="form-group" :class="{'has-error': errors.has('cellphone') }">
            <div class="label">Cell Phone<i class="fa fa-asterisk required" aria-hidden="true"></i></div>
            <div ><input type="text" v-validate ="{ rules: { required: homephone?false:true} }" class="form-control" v-model="cellphone" data-vv-name="cellphone" data-vv-as="Cell Phone" /></div>
            <p class="text-danger" v-if="errors.has('cellphone')">{{ errors.first('cellphone') }}</p>
        </div>

Vee-Validate를 사용하는 모든 사용자용ValidationProvider제본으로rules

homePhone필요한 경우cellPhonenull 또는 빈 문자열입니다.

<ValidationProvider
  v-slot="{ errors }"
  vid="homePhone"
  :rules="{
    required: !cellPhone || cellPhone.length === 0,
  }"
  name="Home Phone"
>

그리고 에 대해서도 마찬가지입니다.cellPhone

<ValidationProvider
  v-slot="{ errors }"
  vid="cellPhone"
  :rules="{
    required: !homePhone || homePhone.length === 0,
  }"
  name="Cell Phone"
>

언급URL : https://stackoverflow.com/questions/44438759/require-at-least-one-of-two-fields-using-vee-validate-on-vuejs-2-0