Vuelidate：多步表单验证

Question

我正在使用 Vuelidate 进行表单验证。

这是一个多步骤的表格，但是在第2步没有输入有效，当我点击下一步按钮时，我无法进入第3步。

我的代码可能有什么问题？

    <section v-show="step === 1">
        <h3>Step 1</h3>
        <div class="name">
            <h4>Name</h4>
            <input v-model="name" @blur="$v.name.$touch" type="text" class="form-control form-control-lg">
            <p v-if="$v.name.$error" class="error-msg">Please fill the name</p>
        </div>
    </section>
    <section v-show="step === 2" class="step2">
        <h3>Step 2</h3>
        ...
    </section>
    
    <section v-show="step === 3" class="step3">
        <h3>Step 3</h3>
            <div class="tele">
                <label for="contact-tele">Telephone</label>
                <input v-model="phone" @blur="$v.phone.$touch" type="text" class="form-control form-control-lg">
                <p v-if="$v.phone.$error" class="error-msg">Please fill your telephone number</p>
            </div>
    </section>

<button class="next-step no-print" @click.prevent="nextStep" v-if="step != totalSteps>Next Step</button>

我的vue代码

methods: {
        nextStep: function() {
            if (this.step = 1) {
                if (this.$v.name.$invalid) {
                    return false;
                } else {
                    return this.step = 2;
                }
            }

            if (this.step = 3) {
                if (this.$v.phone.$invalid) {
                    return false;
                } else {
                    return this.step = 3;
                }
            }
            this.step++;
        },
   
    },

Answer 1

此处您使用单个 = 分配给 this.step 您要检查的值（1 和 3），而您应该使用三元组 ===检查值。

//if (this.step = 1) {
if (this.step === 1) {
    if (this.$v.name.$invalid) {
        return false;
    } else {
        return this.step = 2;
    }
}

//if (this.step = 3) {
if (this.step === 3) {
    if (this.$v.phone.$invalid) {
        return false;
    } else {
        return this.step = 3;
    }
}
this.step++;

详细了解 =、== 和 ===here 之间的区别。

Answer 2

在条件中使用 === 而不是 =。

if(this.step === 1)

并尽量避免 else 情况，因为你最后有 this.step++ 。它将增加步骤。

if (this.step = 1 && this.$v.name.$invalid) return false

if (this.step = 3 && this.$v.phone.$invalid) return false

this.step++;

Vuelidate：多步表单验证

Vuelidate: multiple Step form validation

vue.js

vuelidate