電子郵件確認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驗證插件。