使用 vee-validate 验证特定数量的输入字段

Question

我想在单击下一步按钮时验证向导中的各种步骤，而不验证所有输入。单击下一步按钮时，它应该触发该功能以验证第一步的输入字段。然后在下一步中输入第二步的输入字段，依此类推。下一个按钮不是提交按钮。

 <tab-content title="Company" icon="fas fa-building" :before-change="validateThirdStep">
            <div class="col-md-8 offset-md-2">
                <label class="col-form-label text-md-right">Do you have a chicken?</label>
                <div class="form-goup row">
                    <div class="col-md-7">
                        <input type="radio" name="dsb" id="radios" value="yes" v-model="pickeddsb">Yes
                        <input type="radio" name="dsb" id="radios" value="no" v-model="pickeddsb">No
                    </div>
                </div>
            </div>

            <div class="form-group" v-if="pickeddsb=='yes'">
                <div class="col-md-8 offset-md-2">
                    <h4>Data</h4>
                </div>

                <div class="col-lg-8 m-auto">

                        <!-- Name -->
                        <div class="form-group row">
                        <label class="col-md-3 col-form-label text-md-right">{{ $t('name') }}</label>
                        <div class="col-md-7">
                            <input
                            v-model="namedsb"
                            v-validate="'required|namedsb'"
                            :class="{ 'has-error': errors.has('namedsb') }"
                            type="text"
                            name="namedsb"
                            >
                            {{ errors.first('namedsb') }}
                        </div>
                        </div>

                        <!-- Firm -->
                        <div class="form-group row">
                        <label class="col-md-3 col-form-label text-md-right">{{ $t('companyname') }}</label>
                        <div class="col-md-7">
                            <input
                            v-model="firm"
                            v-validate="'required|firmdsb'"
                            :class="{ 'has-error': errors.has('firmdsb') }"
                            class="form-control"
                            type="text"
                            name="firmdsb"
                            >
                            {{ errors.first('firmdsb') }}
                        </div>
                        </div>

                        <!--Telephone-->
                        <div class="form-group row">
                        <label class="col-md-3 col-form-label text-md-right">{{$t('telephone')}}</label>
                        <div class="col-md-7">
                            <input
                            v-model="telephonedsb"
                            v-validate="'required|telephonedsb'"
                            :class="{ 'has-error': errors.has('telephonedsb')}"
                            class="form-control"
                            type="tel"
                            name="telephonedsb"
                            >
                            {{ errors.first('telephonedsb') }}
                        </div>
                        </div>

                        <!-- Email -->
                        <div class="form-group row">
                        <label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
                        <div class="col-md-7">
                            <input
                            v-model="emaildsb"
                            v-validate="'required|emaildsb'"
                            :class="{ 'has-error': errors.has('emaildsb') }"
                            class="form-control"
                            type="email"
                            name="emaildsb"
                            >
                            {{ errors.first('emaildsb') }}
                        </div>
                        </div>
                </div>
            </div>

        </tab-content>

export default {
data() {
return {
 namedsb: "",
 telephonedsb: "",
 emaildsb: "",
 namere: "",
 telephonere:"",
 emailre: "",
        }
 },
methods: {
   validateThirdStep: function() {
            this.$validator.validate('namedsb', this.namedsb);
            this.$validator.validate('firmdsb', this.firmdsb);
            this.$validator.validate('telephonedsb', this.state);
            this.$validator.validate('emaildsb', this.emaildsb);
        }
}
}

Answer 1

使用 VeeValidate 的内置范围相当简单，您可以在此页面上阅读：enter link description here

一个简单的解释是为每个选项卡/步骤添加一个特定的范围，通过在字段上添加这个：

data-vv-scope="step1"

然后在按下按钮的时候使用这个方法进行验证：

methods: {
    validateForm(scope) {
        this.$validator.validateAll('step1').then((result) => {
            if (result) {
                alert('Form Submitted!');
            }
        });
    }
}