用于匹配电子邮件字段的 Jquery 验证答案

【问题标题】：Jquery validation to match email fields用于匹配电子邮件字段的 Jquery 验证
【发布时间】：2012-07-14 20:41:37
【问题描述】：

我有这个 html 代码：

<p>
 <label for="email">E-mail</label>
 <input id="email" name="email" placeholder="ex: email@gmail.com"/>
</p>        
<p>
<label for="email_alt">E-mail Alternativo</label>
<input id="email_alt" name="email_alt" />
</p>

我想验证电子邮件是否在运行时间上匹配。

我在 stackoverflow 的一篇文章中找到了下面的代码，并且我知道 #author_email 和 #author_confirm_email 是输入的 ID。据我所知 .blur 是在运行时触发警报。但我不理解触发该功能的“.email”。考虑到我拥有的代码，我可以在那里使用什么？

   $(".email").blur(function(){
  //check to two here.
  if ($("#author_email").val() != $("#author_confirm_email").val())
  {
    //do something
  }
});

【问题讨论】：

标签： javascript jquery validation

【解决方案1】：

当对象失去焦点（即有人按下tab或点击下一个输入框）时触发模糊事件。注意“。”表示一个类，而“#”是一个 ID。因此，在该代码中，每当类名为“email”的内容失去焦点时，就会调用该验证函数。

【讨论】：

【解决方案2】：

如果您想在运行时检查字段（即在用户键入时），您必须使用 keyup 事件（每次用户按下并释放键时都会触发此事件）：

$("#email_alt").keyup(function(){
    if ($("#email").val() != $("#email_alt").val()) {
        // emails don't match
    }
});

没有对此进行测试，但实际上它应该可以这样工作。

您可能想要添加一些进一步的验证，例如防止空字段并确保有效的电子邮件地址（如 GTSouza 建议的那样）。

【讨论】：

【解决方案3】：

input#email

input#email-confirm

function IsValidEmail(a){var b=/^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;return b.test(a)}

var validate = true;
$('input[name*="email"]:visible', $(this)).each(function(index, field){
            if(!IsValidEmail($(field).val()) && validate){
                $(field).focus().addClass('invalid');
                validate = false;
                return false;
            }

            var confirm = $('#'+$(field).attr('id')+'-confirm');
            if(confirm.size() > 0){
                if($(field).val() != $(confirm).val()){
                    $(field).focus().addClass('invalid');
                    validate = false;
                    return false;
                }
            }
        });

【讨论】：