Vue.js 中 @focusout 和 @blur 事件详解：表单验证实战

2024-10-19 18:42:10

在 Vue.js 开发中，我们经常需要处理用户与页面元素交互的各种情况。其中，元素获得和失去焦点就是很常见的交互行为。当用户在一个输入框中输入信息，然后点击页面其他区域或者切换到另一个输入框时，我们就说原来的输入框失去了焦点。Vue.js 提供了 @focusout 和 @blur 这两个事件监听器，专门用来处理元素失去焦点的事件。

`@focusout` 与 `@blur`：异同之处

@focusout 和 @blur 都是用来监听元素失去焦点事件的，它们的功能非常相似，但在某些情况下又存在细微的差别。

@blur 事件是比较基础的失去焦点事件，它会在元素失去焦点时立即触发。而 @focusout 事件则会在失去焦点事件冒泡到父元素时触发。

冒泡机制是指当一个事件发生在某个元素上时，它会沿着 DOM 树向上传播，触发其父元素、祖先元素上的同类型事件，直到到达文档根节点。

举个例子，假设我们有一个嵌套的结构：

<div @focusout="handleDivFocusOut">
  <input type="text" @blur="handleInputBlur">
</div>

当用户在输入框中输入内容后，点击页面其他区域，会先触发输入框上的 @blur 事件，然后触发 div 元素上的 @focusout 事件。

何时使用 `@focusout`，何时使用 `@blur`？

在大多数情况下，使用 @blur 就足够了。比如，我们想在用户离开输入框时对输入内容进行验证，就可以直接使用 @blur 事件。

但是，如果我们需要监听子元素失去焦点并执行父元素上的操作，那么 @focusout 就更合适。比如，我们有一个表单，包含多个输入框，我们希望在用户离开整个表单区域时对所有输入框的内容进行一次性验证，就可以在表单的最外层元素上使用 @focusout 事件。

实战演练：表单验证

下面我们通过一个表单验证的例子来演示 @focusout 事件的应用。

假设我们有一个简单的用户注册表单，包含用户名和密码两个输入框。我们希望在用户离开每个输入框时，立即对输入内容进行验证，并给出相应的提示信息。

<template>
  <div>
    <div>
      <label for="username">用户名：</label>
      <input type="text" id="username" v-model="username" @focusout="validateUsername">
      <span v-if="usernameError" class="error">{{ usernameError }}</span>
    </div>
    <div>
      <label for="password">密码：</label>
      <input type="password" id="password" v-model="password" @focusout="validatePassword">
      <span v-if="passwordError" class="error">{{ passwordError }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      usernameError: '',
      passwordError: ''
    };
  },
  methods: {
    validateUsername() {
      if (this.username.length < 6) {
        this.usernameError = '用户名长度不能少于 6 位';
      } else {
        this.usernameError = '';
      }
    },
    validatePassword() {
      if (this.password.length < 8) {
        this.passwordError = '密码长度不能少于 8 位';
      } else {
        this.passwordError = '';
      }
    }
  }
};
</script>