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

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验证插件。

Answer 3

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

电子邮件确认jquery

3 个答案: