电子邮件和密码与即时用户反馈匹配

Question

我有一个 Javascript 功能，我想在用户输入他们的电子邮件地址和密码时提供即时反馈。电子邮件地址和密码都有电子邮件确认和密码确认表格。如果用户输入两个不匹配的电子邮件，或两个不匹配的密码，我希望提示立即显示，然后在用户解决该问题后消失。

我能够创建工作代码，但我希望创建一个函数来为两种情况提供功能，但我无法让它工作。到目前为止，这是我的新代码：

window.onload = function(){
    function match_handler(field_one, field_two, text_hint){
        console.log("field one is:" + field_one);
        console.log("field one value is:" + field_one.value);
        if (field_one.value != field_two.value) {
            text_hint.style.display = "block";
        } else {
            text_hint.style.display = "none";
        }
    }

    //Test to see if the emails match
    var em1 = document.getElementById("em1");
    var em2 = document.getElementById("em2");
    var emHint = document.getElementById("emHint");
    em1.addEventListener("keyup", match_handler(em1, em2, emHint));
    em1.addEventListener("focus", match_handler(em1, em2, emHint));
    em1.addEventListener("blur", match_handler(em1, em2, emHint));
    em2.addEventListener("keyup", match_handler(em1, em2, emHint));
    em2.addEventListener("focus", match_handler(em1, em2, emHint));
    em2.addEventListener("blur", match_handler(em1, em2, emHint));

    // Then I have the same code as for the email, except 
    // for the password matching the password confirmation input
    // with function calls like:

   pswd1.addEventListener("keyup", match_handler(pswd1, pswd2, pswdHint));
}

当我console.log field_one 我看到有一个对象，但是 field_one.value 是空白的。我不确定问题出在哪里，但我希望有一个简单的解决方案。欢迎任何其他与改进上述代码相关的建议。 JQuery也是一种可能。

Answer 1

我找到了我自己问题的答案。显然，我的函数调用格式不正确：

var em1 = document.getElementById("em1");
var em2 = document.getElementById("em2");
var emHint = document.getElementById("emHint");
em1.addEventListener("keyup", function(){match_handler(em1, em2, emHint);});
em1.addEventListener("focus", function(){match_handler(em1, em2, emHint);});
em1.addEventListener("blur", function(){match_handler(em1, em2, emHint);});
em2.addEventListener("keyup", function(){match_handler(em1, em2, emHint);});
em2.addEventListener("focus",function(){match_handler(em1, em2, emHint);});
em2.addEventListener("blur", function(){match_handler(em1, em2, emHint);});

function match_handler(field_one, field_two, text_hint){
    if (field_one.value != field_two.value) {
        text_hint.style.display = "block";
    } else {
        text_hint.style.display = "none";
    }
}

瞧，成功了！

电子邮件和密码与即时用户反馈匹配

Email and password match with instant user feedback

javascript

php

jquery

parameter-passing

dom-events