Question

我有这个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
  }
});

Answer 1

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

Answer 2

如果要在运行时检查字段（即在用户键入时），则必须使用keyup事件（每次用户按下并释放密钥时都会触发此事件）：< / p>

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

没有测试过这个，但实际上它应该是这样的。

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

Answer 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;
                }
            }
        });

Jquery验证以匹配电子邮件字段

3 个答案: