是否有办法有一个弹出窗口，当电子邮件不匹配彼此?

Question

我设置了代码来检查两个电子邮件地址是否匹配。如果它们不匹配，我希望电子邮件框本身变成红色，或者弹出一个窗口，说你的电子邮件不匹配，让他们再试一次。我想不出该怎么做这件事。我让它检查这两封邮件，如果它们不匹配，它会刷新整个页面，并将消息放在屏幕上方。

我的代码

<tr>
<div class="form-group">
<input required type="email" name="email" value="" class="form-control" placeholder="Email-address">
</div>
</tr>
<tr>
<div class="form-group">
<input required type="email" name="email\_retype" value="" class="form-control" placeholder="Re-type Email-address">
</div>
</tr>

检查电子邮件是否匹配的代码

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$error = 'The email address you entered is invalid, please try  again.';
echo "<div class='page_old_full'>
<p class='error'>ERROR: $error</p>
</div>";
break;
}
// checks if both emails are identical
if ($email !== $email_retype) {
$error = 'The two email addresses do not match. Please make sure they are the same.';
echo "<div class='page_old_full'>
<p class='error'>ERROR: $error</p>
</div>";
break;
}

Answer 1

我们可以这样编辑这些HTML元素，为它们添加侦听器:

<input type="text" name="email" onkeyup="resetEmailCheck()">
<input type="text" name="email_retype" onkeyup="resetEmailCheck()">
<input type="submit" value="Submit" id="email_submit_btn" onclick="checkEmails()">

然后在标签中我们需要用Javascript检查它们的值

function checkEmails() {
let em = document.querySelector('input[name="email"]')
let em_re = document.querySelector('input[name="email_retype"]')
if (em.value?.trim() != em_re.value?.trim()) {
em.classList.add('bad-input')
em_re.classList.add('bad-input')
}
}
//when starts typing again - removes the bad class
function resetEmailCheck() {
let em = document.querySelector('input[name="email"]')
let em_re = document.querySelector('input[name="email_retype"]')
em.classList.remove('bad-input')
em_re.classList.remove('bad-input')
}

在css中我添加了一个简单的样式:

.bad-input {
border: 1px solid red
}

这个想法可以通过多种方式实现，但这可能是开始的方式。