内联验证技术，如何验证表单中的最后一个输入？答案

【问题标题】：Inline validation technique, how to validate the LAST input in a form?内联验证技术，如何验证表单中的最后一个输入？
【发布时间】：2014-08-12 15:34:20
【问题描述】：

围绕验证表单中的用户输入的实践已经有了很多想法。我有一个关于“内联验证”的编程问题，也称为“onblur 验证”。（关于内联验证的好处的研究文章可以找到here）。

假设我有一个非常简单的表单，底部有 5 个输入和 1 个提交按钮。用户首先关注第一个字段。在按下标签或手动单击它后，他转到第二个输入。这会触发输入字段 1 的验证。根据所使用的技术，这可能需要几秒钟（例如，如果需要服务器回发来真正验证该字段）。

我的问题在于最后一个字段。用户将期望在完成后看到内联验证。但是如果下一个 ui 元素是按钮而不是另一个输入元素，用户通常不会使用 tab。因此，onblur 验证不会触发，用户也不会得到任何反馈，他们可能会将其误认为是错误输入。如果他们手动单击提交按钮，验证将触发......但它也会触发整个表单提交，如果一切都有效，可能会导致另一个页面。现在，一些用户可能足够聪明，意识到这是 onblur 验证，他们应该“单击任意位置”来触发验证，但我不能指望这一点。

我想到了一个解决方案：对表单的最后一个输入字段使用 keypress 事件而不是 onblur 事件。但是，上面引用的文章指出，最好避免这种验证。它还将大大增加要完成的验证量（每次按键一次）

您对尝试模仿不存在的事件“用户停止输入但没有专注于输入元素”有什么想法？可以通过组合按键事件和计时器来完成吗？（比如，如果用户在 2 秒内没有输入任何内容，那么验证？）

【问题讨论】：

最好的办法是在 keyup 上运行验证并添加一个延迟计时器。这样，它不会在每次按键时验证字段，而是等到用户完成输入。我通常将我的计时器设置为大约 2000 毫秒（2 秒），这让用户有足够的时间来完成输入。（刚刚问到问题的底部，看起来你的思维过程走在正确的轨道上；P）
@APAD1 假设我实现了一个等待 2 秒的延迟。如何在 javascript/jquery 中对其进行编码，以便如果在前一个事件两秒完成之前触发了一个新的 keyup 事件，那么在两秒完成后之前的事件将不再执行？
下面添加示例
为什么不简单地实现验证以在表单提交时触发 - 然后，当用户这样做时，也许将提交按钮更改为 “验证数据，请稍候......” 或某事。类似的，另外暂时停用提交按钮……并开始验证。如果成功，通过JS提交表单完成之前取消的表单提交，否则向他们显示验证错误并重置提交按钮文本和活动状态。
@CBroe 使用我们表单的用户习惯于看到即时验证。如果最后一个字段未验证，他将不想按下提交按钮。他会无所事事地等待几秒钟，然后盯着输入思考为什么它没有验证。

标签： html forms validation

【解决方案1】：

    var typingTimer;                //timer identifier
    var doneTypingInterval = 2000;  //time in ms

    $('input[type="email"]').keyup(function(){
        clearTimeout(typingTimer); //reset the timer
        typingTimer = setTimeout(validateEmail, doneTypingInterval);
    });

将validateEmail 更改为验证电子邮件输入的函数的名称。

【讨论】：

虽然我找不到任何关于给定上下文或用户“XYZ”的“最佳”超时值的真正研究，但我想 1 到 3 秒之间的任何时间都是合理的，并且会产生我想要的效果.谢谢！
是的，很难确定最佳超时时间是多少，因为每个人的打字速度都不同。如果我的目标受众更年轻，我通常认为他们打字速度很快，并将超时时间设置为 2 秒左右。如果观众年龄较大，我可能会将其延长一两秒；）祝你好运！