Question

当我单击模态上的按钮时，如果输入中有一个空字段，则在控制台上会给我一个未定义的值。当我在输入中输入一个值并单击按钮时，它正在添加到我的数据库中。问题在于，即使是空字段或未定义的值也正在添加到我的数据库中，而Sweetalert无法正常工作。我想防止将空字段添加到我的数据库中并防止未定义。有人可以帮我吗？

            //start of method
     checkForm: function(e) {
          if (this.category_description) {
            return true;
          }

          this.errors = [];

          if (!this.category_description) {
            this.errors.push('Category required.');
          }
          e.preventDefault();
        },

      addCategory : function() {
        axios({
            method : "POST",
            url : this.urlRoot + "category/add_category.php",
            data : {
                description : this.category_description
            }
        }).then(function (response){
            vm.checkForm(); //for FORM validation
            vm.retrieveCategory();
            console.log(response);
            swal("Congrats!", " New category added!", "success");   
            vm.clearData();
        }).catch(error => {
            console.log(error.response);
        });
    },
     //end of method

     <form id="vue-app" @submit="checkForm">
    <div class="modal" id="myModal" > <!-- start add modal -->
        <div class="modal-dialog">
            <div class="modal-content " style="height:auto">

                <!-- Modal Header -->
                <div class="modal-header">
                  <h4 class="modal-title"> Add Category </h4>
                  <button @click="clearData" type="button" class="close" data-dismiss="modal"><i class="fas fa-times"></i></button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                    <div class="form-group">
                        <div class="col-lg-12">
                            <input type="text" class="form-control" id="category_description" name="category_description" v-model="category_description" placeholder="Enter Description">
                            <p v-if="errors.length">
                                <span v-for="error in errors"> {{ error }} </span>
                            </p>
                        </div>
                    </div>
                </div>



                <!-- Modal footer -->
                <div class="modal-footer">
                  <button type="submit"@click="category_description !== undefined ? addCategory : ''" class="btn btn-primary"> Add Category </button>
                </div>
            </div>
        </div>
    </div>
    </form>

Answer 1

停止此操作的最简单方法是添加数据检查。并在您的方法顶部进行条件检查。category_description !== undefined。顺便说一句，也将e.preventDefault()也移到顶部。

Answer 2

单击Add Category按钮时，它会触发addCategory和您的验证方法。

验证方法的返回值对addCategory的触发没有影响。

可以通过以下方式处理此问题。

仅当有一些有效数据时才呼叫addCategory

<button type="submit" @click="category_description != undefined ? addCategory() : ''" class="btn btn-primary"> Add Category </button>

在addCategory中调用验证方法，然后继续。

Answer 3

首先，请执行以下操作：

-  <button type="submit" @click="category_description !== undefined ? addCategory : ''" class="btn btn-primary"> Add Category </button>
+  <button type="submit" @click.prevent="addCategory" class="btn btn-primary"> Add Category </button>

，然后在addCategory中：

addCategory() {
  if (!this.category_description) {
    return;
  } else {
  //  do your stuff here
  }

}

为什么还要添加验证表单？

3 个答案: