Django 与 Vue，检测表单验证错误答案

【问题标题】：Django with Vue, detect form validation errorDjango 与 Vue，检测表单验证错误
【发布时间】：2020-08-17 02:36:26
【问题描述】：

我有一个 Django ModelForm，它使用清晰的表单显示在模板中。用户填写完字段并按下提交按钮后，使用 Django 的核心 send_email 在后端发送一封电子邮件。

问题是对 send_email 的调用是同步的，因此用户必须等待下一页加载（成功/失败页面），但此时用户可能再次按下提交按钮，这会生成多个 POST，发送多封电子邮件。

我想使用 Vue.js 在用户按下按钮后使按钮处于非活动状态，但前提是它通过了 Django 的表单验证。有没有办法检测到这一点？

【问题讨论】：

如果您使用的是 Vue，后端使用某种 API 而不是生成表单不是更有意义吗？这样您就可以在您的视图代码中生成表单，使用 DRF（或类似的）来生成您的 API，这会将错误发送回您进行显示，并且只有在一切都有效时才会发送电子邮件。
@TomCarrick 由于我对 Vue 很陌生，因此我的目的是慢慢地从 Django 迁移到前端的 Vue。现在我决定只做你提到的做一个 DRF 端点，其余的大部分是 Redha 从 Javascript 的角度回答的。

标签： django forms validation vue.js

【解决方案1】：

添加到您的按钮 :disabled="!readyToSend" 其中 readyToSend 可以由您的数据函数或计算的属性返回。

在提交表单之前将此变量设置为 false，在从您的 API 接收数据后，将其重置为 true。

在以下示例中，我选择让 readyToSend 成为一个计算比例，如果表单有效且进程未等待 API 响应，它将返回 true。

完整的Code Pen example is here

html 文件：

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>example</title>
  </head>
  <body>
    <div id="app">
      <h2>{{ message }}</h2>
      <form @submit.prevent>
        <input type="text" v-model="dataToSend" placeholder="Something to send">
        <button type="button" :disabled="!readyToSend" @click="send">Send</button>
      </form>
    </div>
  </body>
</html>

javascript：

var vm = new Vue({
  el: '#app',
  data: function(){
      return {
       message: "please enter your message and click on send.",
        dataToSend: "",
        sentAndWaiting: false,
      }
  },
  methods:{
    send: async function(){
      this.sentAndWaiting = true;
      // Send Data Here
      this.message = "sending....";
      try{
        let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        let jsonResponse = await response.json();
      }
      catch(e){
        this.message = e.message;
      }
      // reponse received ... do Something with it
      this.reponseReceived();
    },
    reponseReceived: function(){
      this.sentAndWaiting = false; 
      this.message = "Ok. Got The response.";
    }
  },
  computed:{
    readyToSend: function(){
      return this.dataToSend.length > 0 && !this.sentAndWaiting;
    }
  },

});

在我的浏览器中，我必须通过开发工具进行测试，并将我的互联网连接限制为 GPRS 并禁用缓存：

Screenshot DevTools

【讨论】：