Question

我使用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>

Answer 1

你的意思可能是这样的吗？

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

其中“isRequired”是计算字段，它取决于条件

Answer 2

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

在我的情况下，它是通过给出上述条件来工作的。在多个验证规则的情况下，这也很有帮助... 'required | integer | between：18,99'..

vee-validate：仅在满足条件时才需要

2 个答案: