Question

我尝试创建一个功能来检查两个电子邮件字段之间的匹配，让我们说EMAIL和CONFIRM电子邮件。我绝对试图避免jQuery验证。单个领域不值得。对于其余的我使用HTML5属性，如必需，模式等，它运作良好。这就是我想用setCustomValidity提供无缝体验的原因。

这是我的工作代码，当然，可以由具有JS和jQuery经验的人员改进。

HTML

<input type="email" name="addr1" id="addr1" required>
<input type="email" name="addr2" data-equal-to="addr1" data-msg-error="Emails do not match." required>

的jQuery

$('[data-equal-to]').on('blur', function() {
    var to_confirm = $(this),
        to_equal = $('#' + to_confirm.data('equal-to'));
    if (to_confirm.val() != to_equal.val()) {
        this.setCustomValidity(to_confirm.data('msg-error'));
    }
    else {
        this.setCustomValidity('');
    }
    to_equal.one('blur', function() {
        to_confirm.trigger('blur');
    });
});

以下是我遇到的问题：

我正在使用＆＃39; .bind＆＃39;。事实证明它被弃用了。然后我开始使用＆＃39;。对＆＃39;
我忘记了最后3行。没有事件监听器第一个电子邮件输入，所以我只检查CONFIRM输入。这个得到了修复。
我正在使用＆＃39;输入＆＃39;而不是模糊＆＃39; ＆＃39;输入＆＃39;提供实时验证（当您键入时），这是好的，但也被消费在我看来很多。当你还在打字时，它也显示错误（并且还没有完成），所以一些用户可能会觉得它很混乱。唯一的模糊的缺点＆＃39;我发现有效性的反馈是在之后发生的你点击另一个元素（不聚焦）。
在每个输入上绑定一个新的听众，以及＃to ;ee＆＃39;原来是个坏主意。我最终得到了多个监听器，导致浏览器崩溃。我发现了那个＆＃39; .one＆＃39;存在，应该与.on之前的.off（或者可能在之后？）

我的问题是 - 这个小脚本可以在速度方面改进，还是使用较少的事件监听器？有没有我想过的案例？我搜索了很多，找到了一个很好的无插件解决方案，但没有运气。此外，我坚持使用数据属性来提供匹配的id +错误消息（因为网站是多语言的，并且它比动态的JS更容易修改HTML）。

我认为拥有完美的＆＃39;这个脚本的版本会帮助很多人，特别是在确认电子邮件/密码时（必须记住密码区分大小写！）方面。

Answer 1

尝试onFocusOut事件。用户输入验证电子邮件不检查。如果将此输入保留为tab或clic触发检查功能。例如： jsfiddle.net/Qh0stM4N/cf757e82/1/ 我们能够在每次按键时控制它。但是当用户完成根据用户编写最佳结果并转到另一个表单元素时将采用它。如果在发生更改时检查何时按下按钮不是问题，并且您想验证HTML5，则可以使用此工具执行此操作 codepen.io/diegoleme/pen/surIK

Answer 2

您是否尝试过简单地为第二个输入提供addr2的ID，然后说

if($("#addr1").val() != $("#addr2").val())

在没有插件的情况下使用jQuery输入相等性检查

2 个答案: