JavaScript blur事件详解

1. 什么是blur事件?

在JavaScript中，blur事件是当一个具有焦点的元素失去焦点时触发的事件。当用户点击页面上的另一个元素，或是通过按下”Tab”键或者其他方式将焦点从一个元素转移到另一个元素时，就会触发blur事件。

2. blur事件的应用场景

blur事件通常用于验证用户的输入，或者处理用户焦点转移时的一些行为。下面将介绍一些blur事件的常见应用场景。

a. 输入框验证

当用户在一个表单中输入数据时，我们通常需要对输入的数据进行验证。blur事件可以用来在用户输入完数据后，验证输入框中的内容是否符合要求。

以下是一个示例代码，用于验证一个输入框中的内容是否为一个有效的邮箱地址：

<input type="text" id="email" />

<script>
const emailInput = document.getElementById('email');

emailInput.addEventListener('blur', () => {
  const email = emailInput.value;
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  if (!emailRegex.test(email)) {
    alert('请输入有效的邮箱地址！');
  }
});
</script>

运行以上示例代码后，当用户输入一个不合法的邮箱地址并离开输入框时，会弹出一个提示框提醒用户输入有效的邮箱地址。

b. 表单验证

除了单个输入框的验证，我们还可以利用blur事件来验证整个表单中的数据。当用户离开表单中的一个输入框时，我们可以检查所有输入框中的数据是否合法，并给出相应的提示。

以下是一个示例代码，用于验证一个包含用户名、密码和确认密码的表单：

<form id="registerForm">
  <label>Username: <input type="text" name="username" /></label><br/>
  <label>Password: <input type="password" name="password" /></label><br/>
  <label>Confirm Password: <input type="password" name="confirmPassword" /></label><br/>
  <button type="submit">Register</button>
</form>

<script>
const usernameInput = document.getElementsByName('username')[0];
const passwordInput = document.getElementsByName('password')[0];
const confirmPasswordInput = document.getElementsByName('confirmPassword')[0];
const registerForm = document.getElementById('registerForm');

registerForm.addEventListener('blur', () => {
  const username = usernameInput.value;
  const password = passwordInput.value;
  const confirmPassword = confirmPasswordInput.value;

  if (username === '') {
    alert('请输入用户名！');
  }

  if (password === '') {
    alert('请输入密码！');
  }

  if (confirmPassword === '') {
    alert('请确认密码！');
  }

  if (password !== confirmPassword) {
    alert('密码与确认密码不一致！');
  }
});
</script>