电子邮件确认jquery

Question

我的目标是让用户输入他的电子邮件，然后确认它。如果两者不相同，则表单显示错误。

以下作品中的代码中找到不同之处在于，如果用户

• 输入：“bla@stack.com”上的电子邮件字段;
• 在确认电子邮件字段中输入：“bla@stack.com”;
• 回到电子邮件字段并更改“” bla@stack.com”到‘azerty@stack.com’
• 不会更改确认电子邮件字段

没有。错误

的jQuery：

//Vérifie si l'email et sa répetition son identiques 
$('#RepetitionEmail').keyup(function(){ 

    var RepetitionEmail = $('#RepetitionEmail').val(); 

    if($("#RepetitionEmail").val()!=$("#Email").val()) 
    { 
     $('#RepetitionEmail').css('border-color','orange'); 
     $('.ErreurRepetitionEmail').text('Pas encore les mêmes ...'); 
     checkRepetitionEmail = "Repetition email pas identique"; 
    }else 
    { 
     $('#RepetitionEmail').css('border-color','#00ff00'); 
     $('.ErreurRepetitionEmail').text('... ça y est!'); 
     checkRepetitionEmail = "Repetition email ok"; 
    } 
}); 

Answer 1

您选择更改此

$('#RepetitionEmail, #Email').keyup(function(){ 

它现在将监听两个输入上的keyUp事件。

Answer 2

$('#RepetitionEmail, #Email').keyup(function(){ // do something } 

Answer 3

什么this answer是正确的，你可以改进代码。首先，当用户仅使用鼠标粘贴文本时，您的当前代码将失败。其次，你有冗余的代码可以优化。

这里是一个更好的方法来达到同样的最终结果是：（假设你使用新的jQuery版本）

$("#MyForm").on("change", "#RepetitionEmail, #Email", function() { 
    var tbEmail = $("#Email"); 
    var tbConfirmEmail = $("#RepetitionEmail"); 
    var email = tbEmail.val(); 
    var confirmEmail = tbConfirmEmail.val(); 
    if (email.length === 0 || confirmEmail.length === 0) { 
     //user still did not fill up both. 
     return; 
    } 

    var borderColor = ""; 
    var errorText = ""; 
    if(email !== confirmEmail) 
    { 
     borderColor = "orange"; 
     errorText = "Pas encore les mêmes ..."; 
     checkRepetitionEmail = "Repetition email pas identique"; 
    }else 
    { 
     borderColor = "#00ff00"; 
     errorText = "... ça y est!"; 
     checkRepetitionEmail = "Repetition email ok"; 
    } 

    tbConfirmEmail.css('border-color', borderColor); 
    $('.ErreurRepetitionEmail').text(errorText); 
}); 

Live test case。

处理change事件会更好，因为无论文本如何更改，它都能正常工作。

如果您有更多的事情需要验证或希望它更加灵活，请查看众多jQuery验证插件。