一个很常见的问题，添加某一条信息的时候，例如输入账号之后，在输入密码的时候，立即对账号的输入框进行一个简单的验证。
下面是代码实现：
方法一：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属性是出于良好的分离原则，更方便管理和维护代码。
A
