Question

我在每个选项卡中都创建了代表表单中步骤的步骤。我已使用v-if条件检查应显示哪个步骤。截至目前，当我单击下一步按钮时，这些步骤工作正常。即使输入为空，我也可以继续执行下一步。我想要对每个步骤进行一些验证，以检查输入是否为空，并向该输入添加一个类，例如“错误类”。我该如何在vuejs中做到这一点？这是我在.vue文件中的表格。

<form id="product_form" enctype="multipart/form-data">
                    <!-- One "tab" for each step in the form: -->
                    <button type="button" v-if="step === 2 || step === 3 || step === 4" id="prevBtn1" @click.prevent="prev()"></button>

                    <div v-if="step === 1" class="tab">
                        <h3>Post a product</h3>
                        <div class="preview" id="preview">
                        </div>
                        <div class="single-holder">
                            <input type="text" name="pname" id="pname" placeholder="Title*" required="true" ref="pname">
                        </div>
                    </div>

                    <div v-if="step === 2" class="tab">
                        <h3>Describe your Product</h3>
                        <div class="descrip">
                            <textarea name="description" id="description" placeholder="Description" required="true"></textarea>
                        </div>
                    </div>

                    <div v-if="step === 3" class="tab">
                        <h3>Set Inventory</h3>
                        <div class="fixed-width">
                            <div class="single-holder">
                                <label>Quantity</label>
                                <input type="number" name="quantity" id="quantity" required="true">
                            </div>
                        </div>
                    </div>

                    <div v-if="step === 4" class="tab">
                        <h3>Share On</h3>
                        <div class="address-details-holder clearfix">
                            <div class="single-holder">
                                <input placeholder="_ _ _ _" id="zipcode" name="zipcode" maxlength="4" type="text" @keypress="onlyNumber">
                            </div>
                        </div>
                    </div>
                </form>

这是我在Vuejs中使用的方法

methods:{
onlyNumber ($event) {
   let keyCode = ($event.keyCode ? $event.keyCode : $event.which);
   if ((keyCode < 48 || keyCode > 57) && keyCode !== 46) { // 46 is dot
      $event.preventDefault();
   }
    },
prev() {
  this.step--;
},
next() {
    this.step++;
    //if(this.step===1){
        // console.log(this.$refs.name.value);
        //if(this.$refs.pname.value !== null){
        //  this.step++;
        //}
    //}
}

到目前为止，如果我在方法中的函数next（）中删除了if条件，则这些步骤可以正常工作。但是我需要在每个步骤上进行输入验证，因此用户必须在所有表单字段中填写缺失的数据。

Answer 1

我认为您可以使用Vee Validate。它将帮助您检查每个输入中的必填项

<input v-validate="'required'" data-vv-as="field" name="required_field" type="text">

如果该输入为假，则返回错误消息

<span>{{ errors.first('email') }}</span>

如何在vuejs中以多部分形式验证每个步骤的输入？

1 个答案: