如何检查“发送消息”按钮上的字段是否为空？答案

【问题标题】：How can I check if fields are empty on Send Message button?如何检查“发送消息”按钮上的字段是否为空？
【发布时间】：2021-05-15 09:27:25
【问题描述】：

<template>

<div>
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" v-model="firstName"  placeholder="Enter your name">
  </div>

  <div class="form-group">
    <label for="lastName">Last name</label>
    <input type="text" class="form-control" v-model="lastName" placeholder="Enter your last name">
  </div>

    <div class="form-group">
    <label for="message">Type Your message</label>
    <textarea class="form-control" v-model="message" rows="3"></textarea>
  </div>

  <div class="form-group form-check" v-for="number in numbers" :key="number">
    <input type="checkbox" :value="number.Broj" v-model="checkedNumbers">
    <label class="form-check-label" >{{number.Broj}}</label>
  </div>
    <button type="submit" class="btn btn-primary" v-on:click="alert" @click="sendMessage">Send message</button>
</div>
</template>


<script>
  import http from "../http-common.js";
  import userServices from "../services/userServices.js";
  export default {
    data()
    {
      return {
        firstName: null,
        lastName: null,
        message: null,
        numbers: "",
        checkedNumbers: [],
        success: 'You have submitted form successfully'
      }; 
    },
    methods:
    {
      async sendMessage()
      {
        await http.post("/message", {firstName: this.firstName, lastName: this.lastName, message: this.message, numbers: this.checkedNumbers});
        this.$data.firstName = "",
        this.$data.lastName = "",
        this.$data.checkedNumbers = [],
        this.$data.message = "";

      },

      alert() {
          alert(this.success)
          if(event)
            alert(event.target.tagName)
        },

      retrieveNumbers() {
        userServices.getNumbers().then(response => {
          this.numbers = response.data;
          console.log(response.data);
        })
        .catch(e => {
          console.log(e);
        });
      }

    },
    created() {
      this.retrieveNumbers();
    }
  }

</script>

所以我想在用户单击“发送消息”按钮时添加检查输入字段的选项。我尝试了一些选择，但我失败了。所以，如果有人会帮助我，我会很感激。我还在学习。

我知道我必须使用 v-if 并创建检查字段的方法。

因此，如果您能帮我解决这个问题，我将不胜感激。

感谢开发者，社区

我能否得到一个具体的答案。因为我会这样学习，所以请不要居高临下和“不回答”

【问题讨论】：

在发出 http.post 请求之前检查一下怎么样？在 sendMessage 函数中，您可以访问所有字段。

标签： javascript html node.js vue.js

【解决方案1】：

您可以手动完成：

<script>
  import http from "../http-common.js";
  import userServices from "../services/userServices.js";
  export default {
    data()
    {
      return {
        firstName: null,
        lastName: null,
        message: null,
        numbers: "",
        checkedNumbers: [],
        success: 'You have submitted form successfully'
      }; 
    },
    methods:
    {
      async sendMessage()
      {
        if(!(this.firstName && this.lastName && this.numbers)) return;
        await http.post("/message", {firstName: this.firstName, lastName: this.lastName, message: this.message, numbers: this.checkedNumbers});
        this.$data.firstName = "",
        this.$data.lastName = "",
        this.$data.checkedNumbers = [],
        this.$data.message = "";

      },

      alert() {
          alert(this.success)
          if(event)
            alert(event.target.tagName)
        },

      retrieveNumbers() {
        userServices.getNumbers().then(response => {
          this.numbers = response.data;
          console.log(response.data);
        })
        .catch(e => {
          console.log(e);
        });
      }

    },
    created() {
      this.retrieveNumbers();
    }
  }

</script>

或者你可以使用这个有用的库 https://vuelidate.js.org/#sub-basic-form

【讨论】：

【解决方案2】：

您可以简单地定义一个方法来检查字段并在 sendMessage 方法中的 HTTP 请求之前调用它。

你可以将你的数据初始化为一个空字符串""，并有这样一个方法：

validateForm() {
 return this.firstName != "" && this.lastName != "" && this.message != ""
}

将您的 sendMessage 方法更新为以下内容：

async sendMessage() {
  const isFormValid = this.validateForm()

  if (isFormValid) {
    await http.post(....)
    ...
  }
}

【讨论】：