表单验证不同步答案

【问题标题】：Form validation out of sync表单验证不同步
【发布时间】：2020-04-14 08:20:41
【问题描述】：

我正在为 CS50 课程做作业，而且我是 Jquery/Ajax 的新手。在其中一种形式（注册表单）中，我正在对照现有用户检查输入到文本字段中的用户名。我有代码向 Flask/Python 后端发出 GET 请求，然后查询数据库并返回一个 Json（用户的真/假已经存在是或否）。

我默认禁用提交按钮。仅当用户键入唯一的用户名时，才会启用提交按钮。否则，将显示一条错误消息并且提交按钮保持禁用状态。我用 keyup 功能检查“实时”。

代码运行良好，除非我快速输入现有用户名。然后不知何故，提交按钮被启用而不是被禁用。这几乎就像浏览器仍在追赶后端的 GET 请求，因此注册了不完整的名称，并且没有正确响应作为用户名输入的最新值。

例如，当我输入“John”（现有用户）时，In 可以在 (Flask) 控制台中看到 JSON 未按我输入的顺序返回，例如“J”、“乔”、“乔”、“约翰”。但相反，返回的 Json 的顺序是例如“乔”、“J”、“约翰”、“乔”。在这种情况下，这会导致提交按钮被错误地启用，因为“用户名”字段的当前值为“John”，即现有用户。

我已经在下面粘贴了我的 JS 代码的 sn-p，你能给我一些指点吗？

    <script>
    (function() {
    $( "#username" ).keyup(function(event) {
        var username = document.getElementById('username').value;
        $.ajax({
                url: "/check",
                data: {username: username},
                dataType: "json",
                }).done(
                        function (data, textStatus, jqXHR)
                            {
                                if (data == true)
                                {
                                    $('#usernameExists').removeClass('collapse');
                                    document.getElementById("register").disabled = true;
                                }
                                else
                                {
                                    $('#usernameExists').addClass('collapse');
                                    document.getElementById("register").disabled = false;

                                }
                            }
                );
    });
    })();
    </script>

【问题讨论】：

由于 GET 请求都是异步的，因此无法保证它们完成的顺序 - $.ajax 返回一个类似 Promise 的对象，您可以将其链接起来
谢谢。但是如何处理这样的表单字段验证呢？我试过禁用异步，但 Jquery 似乎不再支持。
如前所述，$.ajax 返回一个 Promise，因此，您可以按照 按顺序执行 的方式链接请求 - 类似于 pastebin.com/ExC7ZjXC
非常感谢，这真的很有帮助。我很早就添加了我的评论。你的例子很清楚，我会进一步研究 Promises。
是的，很抱歉，我在您回复时编辑了第一条评论：p

标签： javascript jquery flask cs50

【解决方案1】：

为什么使用onkeyup？让用户完成他们的想法。正如您所发现的，它为每个字母执行脚本。这将导致不准确的结果，例如如果有一个现有用户“JohnDoe”，那么可怜的“John”将永远无法注册。

看看onchange in MDN doc.

【讨论】：