前端点击其他输入框的时候，对当上个输入框进行判断（鼠标移出输入框事件，和鼠标点击其他输入框触发事件）

懒鱼七忆

已于 2023-11-01 11:35:25 修改

阅读量930

点赞数 4

文章标签： javascript 前端

于 2023-11-01 11:34:49 首次发布

本文链接：https://blog.csdn.net/weixin_53607413/article/details/134156468

版权

一个很常见的问题，添加某一条信息的时候，例如输入账号之后，在输入密码的时候，立即对账号的输入框进行一个简单的验证。

下面是代码实现：

方法一：`onblur`：

<!DOCTYPE html>
<html>
<head>
	<title>账号输入验证</title>

</head>
<body>
	<div class="form-group" >
	    <label class="col-lg-3 control-label ">账号</label>
	    <div class="col-lg-9">
	       <input type="text" id="account" placeholder="请输入账号" onblur="checkInput()"/>
	    </div>
	</div>
	<div class="form-group" >
	    <label class="col-lg-3 control-label ">密码：</label>
	    <div class="col-lg-9">
	       <input type="text" placeholder="其他输入密码"/>
	    </div>
	</div>

</body>

<script>
		function checkInput() {
			var account = document.getElementById("account").value;
			if (account.length < 6) {
				alert("账号不能低于6位数");
			}
		}
</script>
</html>

这段代码中，我们通过onblur事件绑定了checkInput()函数来检查用户输入的账号是否大于5位数。当用户在账号输入框中输入完成并点击其他输入框时，会触发onblur事件，调用checkInput()函数。该函数首先通过document.getElementById("account")获取账号输入框元素，然后使用.value属性获取用户输入的账号值。接着判断该账号值的长度是否大于5，如果大于5，则弹出提示框"账号不正确！"。最后，用户在其他输入框中输入时不会触发事件，不做任何操作。

你可以根据需要进一步调整代码来实现其他功能。

方法二：onmouseout ：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试</title>
		<script type="text/javascript" src = "js/jquery-1.9.1.min.js"></script>
	</head>
	<body>
	<div  >
	    <label >用户名</label>
	    <div >
	        <input onmouseout = "cs(this)" type="text" class="form-control ;" style="height: 30px;width: 500px;" name="username" id="yhm"/>
	    </div>
	</div>
	<div >
	    <label >密码</label>
	    <div >
	        <input type="text" class="form-control text-y" style="height: 30px;width: 500px;" name="email" />
	    </div>
	</div>
	</body>
	<script type="text/javascript">	
	// === 设置分数上限
        function cs (number) {
			console.log("进入方法","number =",number.value);
			if (number.value.length < 6) {
				alert("账号不能低于6位数");
			}
		}
	
	
	</script>
</html>

onmouseout事件是HTML中的一个DOM事件，它在鼠标指针移出某个元素时触发。常用于制作鼠标悬停提示（Tooltip）等交互效果上。

方法三：纯js

<!DOCTYPE html>
<html>
<head>
  <title>账号输入验证</title>
</head>
<body>

	<div  >
	    <label >用户名</label>
	    <div >
	        <input type="text" class="form-control ;" style="height: 30px;width: 500px;"id="Qnumber"/>
	    </div>
	</div>
	<div >
	    <label >密码</label>
	    <div >
	        <input type="text" class="form-control text-y" style="height: 30px;width: 500px;" name="email" />
	    </div>
	</div>
  <script>
    var accountInput = document.getElementById("Qnumber");
    
    function checkInput() {
      var account = accountInput.value;
      if (account.length > 5) {
        alert("账号不正确！");
      }
    }
    
    accountInput.addEventListener("blur", checkInput);
  </script>
</body>
</html>

在这段代码中，我们首先在<head>元素中设置了标题。然后，在<body>元素中创建了两个输入框，其中一个是账号输入框，而另一个只是一个普通的输入框。

接下来，我们使用纯JavaScript在<script>标签中编写了必要的逻辑。我们首先使用document.getElementById("Qnumber")获取到账号输入框的引用，并将其赋值给accountInput变量。然后，我们定义了checkInput()函数，在函数内部获取账号输入框的值，并检查其长度是否大于5。如果账号长度大于5，我们弹出一个提示框，提示用户输入有误。

最后，我们使用addEventListener()方法将blur事件监听器添加到账号输入框上，以便在用户点击其他输入框时触发checkInput()函数进行账号的验证。

注意：这个示例中使用了addEventListener()方法而不是直接在HTML中使用onblur属性是出于良好的分离原则，更方便管理和维护代码。