鼠标焦点离开文本框时验证的js代码

当用户在网页中填写表单时，我们常常需要验证用户输入的数据是否合法。而当用户在输入框输入完内容后，离开这个输入框，我们需要验证这个输入框中的内容是否符合我们的要求，这时候我们就需要使用JavaScript代码来验证用户的输入。以下是实现鼠标焦点离开文本框时验证的js代码的完整攻略。

1. 绑定事件

我们需要先为输入框绑定一个事件，当输入框失去焦点时触发这个事件，使用 onblur 关键字：

<input type="text" name="username" id="username" onblur="checkUsername()">

2. 编写验证函数

在 onblur 事件中调用一个验证函数，这个函数将会检查输入框中的内容是否符合我们的要求，并给出相应的提示。以下是一个检查用户名是否符合要求的验证函数：

function checkUsername() {
  var username = document.getElementById("username").value;
  var reg = /^[a-zA-Z]\w{5,17}$/;

  if (reg.test(username)) {
    alert("输入正确！");
  } else {
    alert("用户名必须由字母和数字组成，长度在6~18之间，且首字符必须为字母。");
  }
}

这个函数使用了正则表达式来检查用户名是否符合要求，如果符合要求，弹出“输入正确”的提示，否则弹出相应的提示。

3. 调用验证函数

在表单验证时，我们需要为每个需要验证的输入框都编写相应的验证函数。例如，在以下表单中，用户名和密码都需要验证：

<form>
  <div>
    <label for="username">用户名：</label>
    <input type="text" name="username" id="username" onblur="checkUsername()">
  </div>
  <div>
    <label for="password">密码：</label>
    <input type="password" name="password" id="password" onblur="checkPassword()">
  </div>
  <input type="submit" value="提交">
</form>

示例1中，onblur 事件调用了 checkUsername() 函数，如下所示：

<input type="text" name="username" id="username" onblur="checkUsername()">

示例2中，onblur 事件调用了 checkPassword() 函数，如下所示：

<input type="password" name="password" id="password" onblur="checkPassword()">

上述示例中的 checkPassword() 函数可以类似地编写，用于验证密码的合法性。

以上就是实现鼠标焦点离开文本框时验证的js代码的完整攻略。