Jquery - 匹配两个电子邮件地址答案

【问题标题】：Jquery - Match two email addressJquery - 匹配两个电子邮件地址
【发布时间】：2011-01-18 02:39:02
【问题描述】：

我正在设置一个注册表单并使用 jquery 验证脚本。有两个电子邮件地址输入文本框。电子邮件 1 必须与电子邮件 2 匹配。我们如何验证这两封电子邮件以确保第二封电子邮件与第一封电子邮件匹配？希望有人可以帮助验证脚本。这是我的文本框编码。

<label  class="input required">7. Email Address:</label>
<input name="author_email" id="author_email" class="inputclass pageRequired email" maxlength="254" title="Email address required" /> <br />

<label  class="input required">8. Confirm Email:</label> 
<input name="author_confirm_email" id="author_confirm_email" class="inputclass pageRequired email" equalTo:"#author_email" maxlength="254" title="Please confirm your email address" /> <br />

谢谢。

【问题讨论】：

出于好奇，如果用户禁用了脚本，您将如何处理？ :)
这是德米安提出的一个很好的观点。前端验证仅与用户的 javascript 设置一样好。

标签： jquery email validation matching

【解决方案1】：

if($("#author_email").val() != $("#author_confirm_email").val())
{
alert("emails don't match, sucka");
}

【讨论】：

谢谢。我使用 griegs 的代码并使用警报消息。现在看起来工作正常

【解决方案2】：

function isValidEmailAddress(emailAddress) {
    var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
    return pattern.test(emailAddress);
}
function validation(){
var firstmail  = $("#author_email").val();
var secondmail  = $("#author_confirm_email").val();
if(firstmail.length != 0){
if(!isValidEmailAddress(firstmail)){
$("#error").html('please fill first mail valid');
}

}
else
$("#error").html('first mail is required');
if(secondmail.length != 0){
if(!isValidEmailAddress(secondmail)){
$("#error").html('please fill second mail valid');
}
}
else
$("#error").html('second mail required');

if(firstmail != secondmail){
$("#error").html('mail not match');
}
}

也许它可以帮助你解决难题。

【讨论】：

感谢您的帮助。欣赏它

【解决方案3】：

在任何一个模糊时，您都可以检查它们是否具有相同的值。不要忘记申请 toLowercase()。

您也可以使用验证插件http://docs.jquery.com/Plugins/validation

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

【讨论】：

$(".email").blur(function(){ //这里勾选两个 if ($("#author_email").val() != $("#author_confirm_email" ).val()) { alert("请确保您的电子邮件匹配"); } });

【解决方案4】：

贡献有点晚，但我正在处理我的验证表单，我正在这样做：

两个输入具有相同的类，您有“电子邮件”，因此您可以通过这种方式操作它们而不是使用特定的 id，并且您可以在其他地方更轻松地重用 sn-p：

if ($('.email').length == 2) {
  var first_email = $('.email').first();
  var second_email = $('.email').last();
  if (first_email.val() != '' && first_email.val() != second_email.val()) {
    console.log('emails does not match');
  }
  else{
    console.log('emails match');
  }
}

【讨论】：

【解决方案5】：

我个人会为这两个字段添加一个输入侦听器，然后像这样进行两种检查：

     $(document).ready(function () {

    $("#email_address_check").on('input', function(e){
        if ($("#email_address").val() != $("#email_address_check").val())
        {
            document.getElementById("email_match_warning").innerHTML = "<span style=\"color:red\" >Email Addresses Do Not Match</span>";
        }
        else
        {
            document.getElementById("email_match_warning").innerHTML = ""; 
        }
        });
        
    $("#email_address").on('input', function(e){
        if ($("#email_address").val() != $("#email_address_check").val())
        {
            document.getElementById("email_match_warning").innerHTML = "<span style=\"color:red\" >Email Addresses Do Not Match</span>";
        }
        else
        {
            document.getElementById("email_match_warning").innerHTML = ""; 
        }
        });
    });
    </script>

【讨论】：