对表单中的输入框使用onblur事件进行重写验证,表单参考第四次作业的表单验证
时间: 2023-04-19 22:03:35 浏览: 133
好的,对表单中的输入框使用onblur事件进行重写验证,可以参考第四次作业的表单验证。具体步骤如下:
1. 在HTML中,给需要验证的输入框添加onblur事件,例如:
<input type="text" name="username" id="username" onblur="checkUsername()">
2. 在JavaScript中,编写验证函数,例如:
function checkUsername() {
var username = document.getElementById("username").value;
var reg = /^[a-zA-Z-9_-]{4,16}$/;
if (!reg.test(username)) {
alert("用户名必须由4-16位字母、数字、下划线或减号组成!");
document.getElementById("username").focus();
return false;
}
return true;
}
3. 在验证函数中,使用正则表达式进行验证,并根据验证结果弹出提示框。
4. 在HTML中,给表单添加onsubmit事件,例如:
<form action="#" method="post" onsubmit="return checkForm()">
...
</form>
5. 在JavaScript中,编写表单验证函数,例如:
function checkForm() {
if (!checkUsername()) {
return false;
}
// 其他输入框的验证
return true;
}
6. 在表单验证函数中,调用各个输入框的验证函数,并根据验证结果返回true或false。
以上就是对表单中的输入框使用onblur事件进行重写验证的步骤,希望能对您有所帮助。
阅读全文
相关推荐


















