Question

在单击“ Salvar”按钮时，我需要验证是否有任何必填字段为空，并且如果其中之一为空，我需要中止vue.js方法发布，然后再执行控制器中的操作。

有没有人可以帮助我？

代码如下：

谢谢！

var vm = new Vue({
    el: '#form',
    data: {
        endereco: "",
        cidade: "",
        estado: "",
        cep: "",
    },
    methods: {
        postResults: function () {
            this.$http.post('/Controller/Action/', {
                Endereco: this.endereco,
                Cidade: this.cidade,
                Estado: this.estado,
                CEP: this.cep,
                SEND: false
            }).then((response) => {
                console.log(response.data);
                console.log(response.data.worked);
                if (response.data.worked) {
                    console.log("DADOS ADICIONADOS!");
                }
            });
        }
    }
})

<div class="form-group label-floating">
  <label class="control-label" for="endereco">
                                Endereço
                            </label>
  <input type="text" class="form-control" id="endereco" v-model="endereco" required>
  <span class="material-input"></span>
</div>
<div class="form-group label-floating">
  <label class="control-label" for="cidade">
                                Cidade
                            </label>
  <input type="text" class="form-control" id="cidade" v-model="cidade" required>
  <span class="material-input"></span>
</div>
<div class="form-group label-floating">
  <label class="control-label" for="estado">
                                Estado
                            </label>
  <input type="text" class="form-control" id="estado" v-model="estado" required>
  <span class="material-input"></span>
</div>
<div class="form-group label-floating">
  <label class="control-label" for="cep">
                                CEP
                            </label>
  <input type="text" class="form-control" id="cep" v-model="cep" required>
  <span class="material-input"></span>
</div>

<button class="btn btn-success" style="width: 80%;" v-on:click="postResults" type="submit">Salvar</button>

Answer 1

真的，您应该将其包装成以下形式：

<form v-on:submit.prevent="postResults">

然后从按钮中删除点击处理程序。

接下来，创建一个新方法，我们将其称为validatesFields。让它返回一个基于有效性而解决或拒绝的承诺：

validatesFields: function() {
  return new Promise(function(resolve, reject) {
    if (this.field.valid && this.other_field.valid&&) {
      return resolve()
    } else {
      return reject()
    }   
  })
}

最后，在您的postResults函数中遵守以下诺言：

postResults: function () {
   this.validatesFields()
     .then(function(){
       this.$http.post('/Controller/Action/', {
          Endereco: this.endereco,
          Cidade: this.cidade,
          Estado: this.estado,
          CEP: this.cep,
          SEND: false
       }).then((response) => {
          console.log(response.data);
          console.log(response.data.worked);
          if (response.data.worked) {
            console.log("DADOS ADICIONADOS!");
          }
        });
     }).error(function(){
       // field validation failed, do something here
     })

    }

如果任何必填字段为空，如何中止vue.js方法发布

1 个答案: