使用没有插件的 jQuery 输入相等检查

Posted 2023-05-09

【中文标题】使用没有插件的 jQuery 输入相等检查

【英文标题】：Inputs equality check using jQuery without plugins

【发布时间】：2018-04-11 07:55:09

【问题描述】：

我尝试创建一个函数来检查两个电子邮件字段之间的匹配，比如说 EMAIL 和 CONFIRM 电子邮件。我绝对尽量避免使用 jQuery 验证。对于一个单一的领域来说是不值得的。对于其余部分，我使用 html5 属性，如 required、pattern 等，并且效果很好。这就是我想通过 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');
    );
);

以下是我遇到的问题：

我使用的是“.bind”。事实证明它已被弃用。然后我开始使用 '.on' 我忘记了最后 3 行。没有事件监听器 第一个电子邮件输入，所以我只检查 CONFIRM 输入。这 已修复。 我使用的是“输入”而不是“模糊”。提供“输入” 实时验证（当你输入时）这很好，但也消耗了 在我看来很多。当您仍在输入时，它也显示错误 （并且还没有完成），所以一些用户可能会感到困惑。唯一的 我发现“模糊”的缺点是有效性的反馈是在 您单击另一个元素（取消焦点）。 在每个输入上绑定一个新的侦听器到 'to_equal' 被证明是个坏主意。我最终得到了多个侦听器，导致浏览器崩溃。我发现 '.one' 存在，它应该在 .on 之前（或之后？）与 .off 相同

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

我认为拥有这个脚本的“完美”版本会帮助很多人，尤其是在确认电子邮件/密码（密码必须注意区分大小写！）方面。

【问题讨论】：

为什么不直接使用 javascript == 或 ===？

您向我们提供了您想要改进的工作代码。我觉得这个问题更适合codereview.stackexchange.com/questions/ask。

亲爱的 Wouter Bouwman，您可能是对的。我不知道 CODE REVIEW，因为自从我上次出现以来，SA 社区有了很大的发展。感谢您指出这一点。

【参考方案1】：

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

【参考方案2】：

你有没有试过简单地给第二个输入一个 addr2 的 id，然后说

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

?

【讨论】：

这毫无意义，对不起

【参考方案3】：

具有类和兄弟的可重用代码：

$('.mail')              .on('keyup', checkPasses)
function checkPasses (e) 
    $ps1 = $(e.delegateTarget)
    $ps2 = $ps1.siblings('.psw')
    $pss = $ps1.add($ps2)
    if ( $ps1.val() == $ps2.val() ) 
        $pss.css('color', 'green')[0].setCustomValidity('')         
   else       
        $pss.css('color', 'red')[0].setCustomValidity('Passwords do not match')