javascript - 将 HTML 值与 jquery 输入值进行比较

Question

我觉得我错过了一些小东西，但我似乎无法完成这项工作。我正在验证一个表单，允许用户更改其电子邮件，除其他外，我还想确认他们没有重新输入已有的同一电子邮件。

我已经尝试了很多尝试使用 id="originalemail"提取 p 的值，但我似乎无法以与输入的值相比反射(reflect)字符串的形式获取它是相同的。任何帮助将不胜感激。

为了简单起见，我将函数 trim 为仅根据输入的新电子邮件是否与当前现有(原始)电子邮件匹配进行验证:

JS/jquery:

<script>
function validateEmailChange()
{
    // set comparison
    var originalemail=document.getElementById("originalemail").innerHTML;
    var newemail=document.forms["emailform"]["emailnewemail"].value;

    if (newemail == originalemail)
    {
        $('#emailnewemailoff').html("Same as current email address");
        $('#emailconfirmationoff').html("");
        return false;
    }
</script>

HTML:

// show the user's current email
<p id="originalemail"><?= htmlspecialchars($user[0]["email"]) ?></p>

<form id="emailform" name="emailform" onsubmit="return validateEmailChange()" 
              action="email.php" method="post">

<input id="emailnewemail" name="emailnewemail" placeholder="New Email" type="text"/>
<input type="submit" value="Change Email" class="btn"/>

非常感谢!

Answer 1

我创建了 jQuery，它会在用户离开电子邮件输入字段时进行评估 ($('#emailnewemail').blur()，并且比较不区分大小写的值 (. toLowerCase())，这样“my@email.com”就会被识别为与“my@EMAIL.COM”相同。

$('#emailnewemail').blur(function() {
    if ($('#originalemail').text().toLowerCase() === $('#emailnewemail').val().toLowerCase()) {
        $('#emailnewemailoff').html("Same as current email address");
        $('#emailconfirmationoff').html("");
        return false;
    } else {
        $('#emailnewemailoff').html("Not the same email address");
    }
});

参见http://fiddle.jshell.net/jhfrench/EZp6R/一个工作示例。