📅 最后修改于: 2023-12-03 14:50:34.486000 🧑 作者: Mango
在用户填写表单时，我们通常会加入一些校验功能，以确保用户输入的数据符合我们的要求。其中，反应失焦检查是一种常见的校验方式，它可以实时监测用户的输入，当用户离开输入框时，若输入的数据不符合要求，则弹出提示框进行提醒。
反应失焦检查其实就是利用了表单元素的blur事件，当用户离开输入框时触发相应的函数，以进行校验操作。下面是一个简单的实现方式：
// 获取输入框元素
const input = document.getElementById('input')
// 监听输入框的blur事件
input.addEventListener('blur', function () {
// 进行校验操作
const value = input.value
if (value.indexOf('@') === -1) {
alert('请输入正确的邮箱格式！')
// 将焦点重新定位到输入框
input.focus()
}
})
如上所示，我们通过获取输入框元素，并监听其blur事件，来实现反应失焦检查。在校验操作中，我们判断输入的邮箱格式是否正确，若错误，则弹出提示框，并将焦点重新定位到输入框。
实现一个简单的反应失焦检查功能，校验用户输入的姓名和手机号码是否符合要求，并在用户离开输入框时给出相应的提示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>反应失焦检查 - 实战演练</title>
</head>
<body>
<h1>反应失焦检查 - 实战演练</h1>
<form>
<label for="name">姓名：</label>
<input type="text" id="name" placeholder="请输入您的姓名"><br><br>
<label for="phone">手机号码：</label>
<input type="text" id="phone" placeholder="请输入您的手机号码"><br><br>
<input type="submit" value="提交">
</form>
<script>
// 获取表单元素
const name = document.getElementById('name')
const phone = document.getElementById('phone')
// 监听输入框的blur事件
name.addEventListener('blur', function () {
// 校验姓名
const value = name.value
if (!value) {
alert('姓名不能为空！')
name.focus()
}
})
phone.addEventListener('blur', function () {
// 校验手机号码
const value = phone.value
if (!/^1[35789]\d{9}$/.test(value)) {
alert('请输入正确的手机号码！')
phone.focus()
}
})
</script>
</body>
</html>
在上述代码中，我们在表单中添加了两个输入框和一个提交按钮，并分别对姓名和手机号码进行了反应失焦检查。当用户离开输入框时，若输入的数据不符合要求，则会弹出相应的提示框并将焦点重新定位到输入框。