vee-validate: 조건을 충족하는 경우에만 필요합니다.

vee-validate: 조건을 충족하는 경우에만 필요합니다.

폼 검증을 위해 Vuejs2와 vee-validate를 사용하고 있습니다.훌륭한 패키지입니다만, 조건부 필수 필드를 실장하는 데 어려움을 겪고 있습니다.

특정 라디오 옵션을 선택한 경우 두 개의 선택 필드가 필요합니다.그리고 그 무선이 선택되지 않은 경우 두 개의 선택 필드를 선택하도록 하겠습니다.

사용하려고 했습니다.attach그리고.detach방법들.검증을 정상적으로 분리할 수 있습니다.그리고 필드를 첨부하면, 그 필드가 에 표시되는 것을 알 수 있습니다.fields물건.하지만 검증자가 알아내지 못했습니다.

코드는 다음과 같습니다.

<template>
  <form class="ui form" role="form" method="POST" action="/activate" v-on:submit.prevent="onSubmit" :class="{ 'error': errors.any() }">
    <div class="ui segment">
      <h4 class="ui header">Basic Company Information</h4>
      <div class="ui message">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
      <div class="field" :class="{ 'error': errors.has('name') }">
        <div class="ui labeled input">
          <label class="ui label" for="name">
            Company
          </label>
          <input id="name" type="text" name="name" v-validate="'required'" v-model="name">
        </div>
      </div>
      <div class="ui error message" v-show="errors.has('name')">
        <p>{{ errors.first('name') }}</p>
      </div>
      <div class="grouped fields" :class="{ 'error': errors.has('organisation_type_id') }">
        <label for="organisation_type_id">Organisation type</label>
        <div class="field">
          <div class="ui radio checkbox">
            <input class="hidden" type="radio" name="organisation_type_id" value="1" data-vv-as="organisation type" v-validate="'required'" v-model="organisation_type">
            <label>Buyer</label>
          </div>
        </div>
        <div class="field">
          <div class="ui radio checkbox">
            <input class="hidden" type="radio" name="organisation_type_id" value="2" checked>
            <label>Seller</label>
          </div>
        </div>
      </div>
      <div class="ui error message" v-show="errors.has('organisation_type_id')">
        <p>{{ errors.first('organisation_type_id') }}</p>
      </div>
      <div v-show="organisation_type == '2'">
        <div class="field" :class="{ 'error': errors.has('countries[]') }">
          <label for="countries">Countries</label>
          <select class="ui fluid search dropdown" id="countries" name="countries[]" multiple data-vv-as="countries" v-validate="'required'">
            <option v-for="country in countries" :value="country.value">{{ country.text }}</option>
          </select>
        </div>
        <div class="ui error message" v-show="errors.has('countries[]')">
          <p>{{ errors.first('countries[]') }}</p>
        </div>
        <div class="ui message field-description">
          <p>Select all the countries you export to.</p>
        </div>
        <div class="field" :class="{ 'error': errors.has('ciphers[]') }">
          <label for="ciphers">Ciphers</label>
          <select class="ui fluid search dropdown" id="ciphers" name="ciphers[]" multiple data-vv-as="ciphers" v-validate="'required'">
            <option v-for="cipher in ciphers" :value="cipher.value">{{ cipher.text }}</option>
          </select>
        </div>
        <div class="ui error message" v-show="errors.has('ciphers[]')">
          <p>{{ errors.first('ciphers[]') }}</p>
        </div>
        <div class="ui message field-description">
          <p>Select all the ciphers you support.</p>
        </div>
      </div> <!-- End organisation_type_id -->
      <button class="ui fluid green button" type="submit">Continue</button>
    </div> <!-- .ui.segment -->
  </form>
</template>

<script>
  export default {
    props: ['countriesJson', 'ciphersJson'],
    data() {
      return {
        name: null,
        organisation_type: '2',
        countries: [],
        ciphers: [],
      }
    },
    watch: {
      organisation_type: function(value) {
        var vm = this
        if (value == '2') {
          vm.$validator.attach('countries[]', 'required');
          const select = document.getElementById('countries');
          select.addEventListener('change', function() {
            vm.$validator.validate('required', this.value);
          });
          vm.$validator.attach('ciphers[]', 'required');
          const select = document.getElementById('ciphers');
          select.addEventListener('change', function() {
            vm.$validator.validate('required', this.value);
          });
        } else {
          vm.$validator.detach('countries[]')
          vm.$validator.detach('ciphers[]')
        }
      },
    },
    mounted() {
      this.countries = JSON.parse(this.countriesJson)
      this.ciphers = JSON.parse(this.ciphersJson)
    },
    methods: {
      onSubmit: function(e) {
        this.$validator.validateAll().then(success => {
          e.target.submit()
        }).catch(() => {
          return
        })
      }
    }
  }
</script>

혹시 이런 걸 말씀하시는 건가요?

<input id="name"
       type="text"
       name="name"
       v-validate="{ required: this.isRequired }"
       v-model="name">

여기서 "isRequired"는 조건에 따라 달라지는 계산 필드입니다.

<input id="name"
       type="text"
       name="name"
       v-validate=" isRequired ? 'required' : '' "
       v-model="name">

제 경우 위의 조건을 제시함으로써 효과가 있었습니다.또한 'required|integer|between: 18,99'와 같이 여러 검증 규칙이 있는 경우에도 유용합니다.

{}을(를) 추가하면 식이 끊어집니다.

언급URL : https://stackoverflow.com/questions/43024684/vee-validate-required-only-if-a-condition-is-met