时间戳

首页 > 解决方案 > 使用模糊事件，我如何确保模糊事件在提交按钮之前发生？

javascript - 使用模糊事件，我如何确保模糊事件在提交按钮之前发生？

问题描述

假设我在输入上写了 Bob，但我仍然专注于输入，然后单击注册。错误不会显示，因为我仍然专注于输入。我的问题是，如何确保在使用常规 javascript 单击提交之前显示错误？

function check(form) {
  username = document.querySelector(form).querySelector("input[name=username]")
  username.addEventListener('blur', e => {
    if (username.value === "Bob") {
      const label = document.createElement('label')
      label.appendChild(document.createTextNode("Your name cant be bob"))
      username.parentNode.insertBefore(label, username.nextSibling)
    }

  })
}
check("#formTest")
<h2>Registration</h2>
<form action="" id="formTest" name="registration">

  <label for="firstname">Username</label>
  <input type="text" name="username" /> <br />

  <button type="submit">Register</button>

</form>

标签： javascript

解决方案

通过使用keyup事件，它按预期工作。请检查代码片段。

function check(form) {
  username = document.querySelector(form).querySelector("input[name=username]")
  username.addEventListener('keyup', e => {
    if (username.value === "Bob") {
      const label = document.createElement('label')
      label.appendChild(document.createTextNode("Your name cant be bob"))
      username.parentNode.insertBefore(label, username.nextSibling)
    }
  })
}
check("#formTest")
<h2>Registration</h2>
<form action="" id="formTest" name="registration">
  <label for="firstname">Username</label>
  <input type="text" name="username" /> <br />
  <button type="submit">Register</button>
</form>

推荐阅读