HTML | onblur 属性

HTML中的onblur属性用于当元素失去焦点时执行脚本。它对于表单验证等输入操作非常有用。

语法

onblur="script"

示例

<input type="text" onblur="validateInput()" />

上述示例中，当文本输入框失去焦点时，validateInput()函数将被调用执行。

在下面的代码片段中，一个表单被创建，其中包含三个输入框，每个输入框有它自己的validate()函数来验证输入内容。每个输入框的onblur属性设置为相应的validate()函数。

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" onblur="validateName()" required><br>

  <label for="email">Email:</label>
  <input type="email" id="email" onblur="validateEmail()" required><br>

  <label for="age">Age:</label>
  <input type="number" id="age" onblur="validateAge()" required><br>

  <input type="submit" value="Submit">
</form>

<script>
  function validateName() {
    const nameInput = document.getElementById("name");
    const name = nameInput.value.trim();

    if (name === "") {
      nameInput.setCustomValidity("Name is required.");
    } else {
      nameInput.setCustomValidity("");
    }
  }

  function validateEmail() {
    const emailInput = document.getElementById("email");
    const email = emailInput.value.trim();

    if (email === "") {
      emailInput.setCustomValidity("Email is required.");
    } else if (!/^\S+@\S+\.\S+$/.test(email)) {
      emailInput.setCustomValidity("Email format is invalid.");
    } else {
      emailInput.setCustomValidity("");
    }
  }

  function validateAge() {
    const ageInput = document.getElementById("age");
    const age = ageInput.value.trim();

    if (age === "") {
      ageInput.setCustomValidity("Age is required.");
    } else if (isNaN(age)) {
      ageInput.setCustomValidity("Age must be a number.");
    } else if (age < 18) {
      ageInput.setCustomValidity("You must be over 18 years old.");
    } else {
      ageInput.setCustomValidity("");
    }
  }
</script>

运行上面的代码片段，当一个输入框失去焦点时，相应的validate()函数将会被调用，当输入不符合要求时，将会显示错误消息。

注意

1. onblur属性只能用在交互式元素上（如, 等）
2. 设置onblur属性将覆盖元素原有的任何onblur事件

在HTML中，onblur是处理表单交互行为的强大工具，因为它可以让开发者根据用户的输入来及时验证数据，保证数据的正确性。