麻烦老师帮我看一下代码，我脑子晕晕，有点搞不清哪里写错了
来源：4-15 编程练习
小屁鹤
2019-09-04 10:35:08
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
div{
width: 400px;
height: 30px;
margin: 20px 0 10px 40px;
text-align: right;
line-height: 30px;
}
input[type=submit]{
width: 80px;
height: 30px;
line-height: 30px;
background-color: #999;
border: 1px solid black;
cursor: pointer;
}
input[type=submit]:hover{
background-color: white;
}
.errorMessage{
color: red;
margin: 2px;
text-indent: 10px;
}
</style>
</head>
<body>
<form id="forms">
<div>
<label for="username">用户名:</label>
<input type="text" id="username" required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" required>
</div>
<div>
<input type="submit" id="submit" value="提交">
</div>
</form>
<script type="text/javascript">
var form = document.getElementById("forms");
replaceInvalidMessage(form);
function replaceInvalidMessage(form){
var submitBtn = document.getElementById('submit'),
username = document.getElementById('username'),
email = document.getElementById('email');
// 阻止默认事件
form.addEventListener("invalid", function(event){
event.preventDefault();
},true);
form.addEventListener("submit",function(event){
if(!this.checkValidity()){
event.preventDefault();
}
},true);
// 监听"提交"按钮
submitBtn.addEventListener("click",function(event){
var itFormInvalid = form.querySelectorAll(":invalid"),
errorMessage = form.querySelectorAll(".errorMessage"),
parent;
// 删除多余错误提示信息
for(var i = 0; i < errorMessage.length; i++){
errorMessage[i].parentNode.removeChild(errorMessage[i]);
}
// 修改默认错误提示信息
username.addEventListener("invalid",function(){
username.setCustomValidity("用户名：请填写此字段！");
})
email.addEventListener("invalid",function(){
email.setCustomValidity("Email：请填写此字段！");
})
// 加入错误信息
for(var i = 0; i < itFormInvalid.length; i++){
parent = form.parentNode;
parent.insertAdjacentHTML("afterbegin","<div class = 'errorMessage'>" + itFormInvalid[i].validationMessage + "</div>");
}
if( itFormInvalid.length > 0){
itFormInvalid[0].focus();
}
})
}
</script>
</body>
</html>
1回答
-
同学你好！
需要先注释掉修改默认错误提示信息
（1）可以在往上找一级父节点，再插入，如下：
（2）用户名和email相反了是因为无效的文本域是实时获取的，但是label标签获取出来的是所有的，每次都会从第一个显示，所以会有问题。可以通过无效的文本域来获取label标签文本，参考：
整体修改如下：
效果：
同学可以参考上修改一下，并且可以再优化下布局
如果帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题