4-13编程练习
来源：5-1 课程总结
Nekosan
2018-03-21 23:52:14
最后我实现的效果为什么email的错误提示反而在最上面，用户名的提示在下面？按顺序的话，不应该是用户名提示在上面，email提示在下面吗？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.onelist{
line-height:1.5;
margin:10px auto;
}
.onelist label{
width:100px;
text-indent:15px;
font-size:14px;
font-family:"Microsoft Yahei";
display:inline-block;
}
.onelist .sinput{
width:60%;
height:30px;
border-radius:6px;
border:1px solid #e2e2e2;
}
.onelist input[type="submit"]{
margin-left:20px;
width:80px;
height:30px;
border:0;
background-color:#5899d0;
color:#fff;
font-size:14px;
border-radius:6px;
}
.error-message{
color:red;
font-size:12px;
}
</style>
</head>
<body>
<form action="#" id="forms">
<div class="onelist">
<label for="name">用户名：</label>
<input type="text" id="name" name="name" class="sinput" required>
</div>
<div class="onelist">
<label for="email">Email：</label>
<input type="email" id="email" name="email" class="sinput" required>
</div>
<div class="onelist">
<input type="submit" value="提交" id="submit">
</div>
</form>
<script>
function replaceInvalidityUi(form){
form.addEventListener("invalid",function(event){
event.preventDefault();
},true);
form.addEventListener("submit",function(){
if (!this.checkValidity()) {
event.preventDefault();
}
},true);
var submitBtn=document.getElementById("submit");
submitBtn.addEventListener("click",function(event){
var inValidityField=form.querySelectorAll(":invalid"),
errorMessage=form.querySelectorAll(".error-message"),
parent;
for(var i=0;i<errorMessage.length;i++){
errorMessage[i].parentNode.removeChild(errorMessage[i]);
}
for(var i=0;i<inValidityField.length;i++){
parent=inValidityField[i].parentNode.parentNode;
parent.insertAdjacentHTML("afterbegin","<ul><li class='error-message'>"+inValidityField[i].validationMessage+"</li></ul>");
}
if(inValidityField>0){
inValidityField[0].focus();
//errorMessage.style.display = "block";
}
})
}
var form=document.getElementById("forms");
replaceInvalidityUi(form);
</script>
</body>
</html>写回答
2回答
-
一路电光带火花
2018-03-25
afterBegin:插入到标签开始标记之后，这里是先插入了用户名的提示，然后一次执行，在开始标签之后又插入了，那就是后面插入这个是在最上面呀。
0 -
好帮手慕星星
2018-03-22
测试了你的代码，因为afterbegin是在...前面，也就是先有用户名的错误提示，在用户名之前插入email的错误提示，所以是倒着的顺序，你可以添加一下名称，参考：
自己再测试下，祝学习愉快~~
0h018-03-24
