通过行内式绑定focus和blur事件,实现注册验证的功能
时间: 2024-03-23 16:43:00 浏览: 51
注册验证模块
可以通过以下代码实现:
```
<input type="text" placeholder="请输入用户名"
onblur="checkUsername()" onfocus="clearError()">
<span id="usernameError" style="color:red"></span>
<script>
function checkUsername() {
var username = document.querySelector('input[type="text"]').value;
if (username.length < 6) {
document.querySelector('#usernameError').textContent = "用户名长度不能少于6个字符";
} else {
document.querySelector('#usernameError').textContent = "";
}
}
function clearError() {
document.querySelector('#usernameError').textContent = "";
}
</script>
```
在输入框中加入了`onblur`和`onfocus`事件,当输入框失去焦点时(即`onblur`事件被触发),会调用`checkUsername()`函数进行用户名验证;当输入框获得焦点时(即`onfocus`事件被触发),会调用`clearError()`函数清空错误提示信息。其中,错误提示信息的显示通过一个`<span>`元素实现。
阅读全文