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工作的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函数中，这样每次有人在输入中键入字母时都不会设置它们。但它会像这样工作。

重复电子邮件功能

1 个答案: