时间戳

首页 > 解决方案 > 有没有办法在电子邮件不匹配时弹出窗口？

javascript - 有没有办法在电子邮件不匹配时弹出窗口？

问题描述

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

这是我的代码

<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;
       }

标签： javascriptphp

解决方案

我们可以编辑这些 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
}

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

推荐阅读