javascript - 重复邮件功能

Question

我有一个功能可以检查以确保人们正确输入了他们的电子邮件。

我从这里得到了代码。 Repeat email in HTML Form not the same. Why?

问题是如果您在第二个输入“eMail_repeat”中输入的电子邮件不正确，您可以更改第二个输入没问题。但是，如果您在第一个输入“eMail”中输入错误，而在第二个输入中输入正确，然后尝试更改第一个，它仍然显示为电子邮件不匹配。

有什么想法吗？

<form id="form" method="post" action="formmail.php" name="form" width="100%">


<fieldset> <table cellspacing="0" cellpadding="0" id="confquest">

<tr height="80px"><td><label for="eMail" id="emaillabel"><strong>Email address:</strong></label><br> <input id="eMail" type="email" name="EmailAddr" title="Enter your email address" placeholder="example@mail.com" required /></td></tr>

<tr height="80px"><td><label for"eMail_repeat" id="emaillabel2"><strong>Repeat Email address:</strong></label><br> <input id="eMail_repeat" type="email" name="email_addr_repeat" title="Repeat your email address" placeholder="example@mail.com" required oninput="check(this)" /></td></tr> </table>


<input id="submit2" type="submit" name="submit" value="Submit" />

</fieldset></form>


<script> 
   function check(input) { 
   if (input.value != document.getElementById('eMail').value) { 
   input.setCustomValidity('The two email addresses must match.'); 
   } else { 
    // input is valid -- reset the error message 
   input.setCustomValidity(''); 
  } 
  } 
</script>

Answer 1

在您的第二个输入上，您有一个名为 oninput 的属性，该属性正在调用一个函数，该函数在输入更改时检查值。

<input id="eMail_repeat" type="email" name="email_addr_repeat" title="Repeat your email address" placeholder="example@mail.com" required oninput="check(this)" />

由于您在第一次输入时没有这个值，因此在您仅编辑第一个输入后就不会再次检查该值。

编辑:

两个输入都需要oninput=check()

以及使其工作的 JavaScript:

   function check() { 
       var email = document.getElementById('eMail');
       var emailRepeat = document.getElementById('eMail_repeat');

       if (email.value != emailRepeat.value) { 
           emailRepeat.setCustomValidity('The two email addresses must match.'); 
       } else { 
           // input is valid -- reset the error message 
           emailRepeat.setCustomValidity(''); 
       } 
  } 

我会将变量 email 和 emailRepeat 移动到页面的 onload 函数中，这样您就不会在每次有人在输入中键入字母时都设置它们。但它会像这样工作。