请完善上一个回答中的代码,要求当输入框失去焦点时给出验证提示
时间: 2024-02-22 15:56:11 浏览: 88
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
5星 · 资源好评率100%
好的,以下是完善后的代码:
```html
<input type="text" id="username" placeholder="请输入用户名" onblur="checkUsername()">
<script>
function checkUsername() {
var username = document.getElementById("username").value;
var pattern = /^[a-zA-Z]\w{5,17}$/;
if (pattern.test(username)) {
// 验证通过
document.getElementById("username").style.border = "1px solid green";
} else {
// 验证不通过
document.getElementById("username").style.border = "1px solid red";
alert("用户名格式不正确,请重新输入!");
}
}
</script>
```
在输入框失去焦点时,调用 `checkUsername()` 函数进行验证。如果验证通过,则将边框设置为绿色,表示格式正确;如果验证不通过,则将边框设置为红色,并弹出提示框,告知用户重新输入。
阅读全文