Javascript 验证聚焦于标签文本和输入边框

我使用Javascript进行输入验证，当它为空并在输入外部单击时，它会在边框和标签输入上显示错误或红色。当它处于焦点时，在输入或添加文本内单击，边框变为蓝色，标签文本应与输入颜色相同

我试图在输入函数中添加onfocus，以便触发标签文本的验证，但是它似乎不起作用，请给出建议

constuserinput=document.querySelectorAll（“.inputJs”）；
const userLabel=document.querySelectorAll（“.guestlist表单标签”）；
forEach（函数（evt，索引）{
evt.onblur=函数（）{
const textInput=userLabel[index]；
如果（evt.value==“”）{
evt.classList.add（“有错误”）；
textInput.classList.add（“有错误”）；
}否则{
evt.classList.remove（“有错误”）；
textInput.classList.remove（“有错误”）；
}
};
userLabel.onfocus=函数（）{
const textlab=userLabel[index]；
if（userLabel.classList.contains（“has error”））{
textlab.classList.remove（“有错误”）；
textlab.classList.add（“has blue”）；
}否则{
textlab.classList.remove（“有蓝色”）；
}
};
});
.guestlist-form-label.has-blue{
颜色：蓝色；
}
.guestlist-form-label.has-error{
颜色：红色；
}
.inputJs.has-error{
边框：1px纯红；
}
.guestlist表单包装器{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
宽度：62%；
}
.guestlist表单包装器输入{
显示器：flex；
弯曲方向：立柱；
宽度：48%；
边缘顶部：25px；
}
.guestlist表单包装器输入标签{
颜色：#9b9b9b；
字体大小：14px；
边缘底部：5px；
}
.guestlist表单包装器输入{
背景色：透明；
边框：1px实心#9b9b；
填充：10px；
颜色：#ffffff；
}
.guestlist表单包装器输入：焦点{
大纲：无；
边框：1px实心#4990e2；
颜色：#4990e2；
-webkit盒阴影：0 10px 0 rgba（73,144,226,0.2）；
盒影：0 10px 0 rgba（73、144、226、0.4）；
}

名字*
姓*
电子邮件*
电话*
你把焦点弄得太复杂了。只需删除错误类


constuserinput=document.querySelectorAll（“.inputJs”）；
const userLabel=document.querySelectorAll（“.guestlist表单标签”）；
forEach（函数（输入，索引）{
const labelInput=userLabel[index]；
const errorClass='has error'
const blueClass='has blue'
addEventListener（“blur”，function（））{
var HASRERROR=input.value==“”
input.classList.toggle（errorClass，hasError）；
labelInput.classList.toggle（errorClass，hasError）；
labelInput.classList.remove（blueClass）；
});
input.addEventListener（“焦点”，函数（）{
input.classList.remove（errorClass）；
labelInput.classList.remove（errorClass）；
labelInput.classList.add（blueClass）；
})
});
.guestlist-form-label.has-blue{
颜色：蓝色；
}
.guestlist-form-label.has-error{
颜色：红色；
}
.inputJs.has-error{
边框：1px纯红；
}
.guestlist表单包装器{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
宽度：62%；
}
.guestlist表单包装器输入{
显示器：flex；
弯曲方向：立柱；
宽度：48%；
边缘顶部：25px；
}
.guestlist表单包装器输入标签{
颜色：#9b9b9b；
字体大小：14px；
边缘底部：5px；
}
.guestlist表单包装器输入{
背景色：透明；
边框：1px实心#9b9b；
填充：10px；
颜色：#ffffff；
}
.guestlist表单包装器输入：焦点{
大纲：无；
边框：1px实心#4990e2；
颜色：#4990e2；
-webkit盒阴影：0 10px 0 rgba（73,144,226,0.2）；
盒影：0 10px 0 rgba（73、144、226、0.4）；
}

名字*
姓*
电子邮件*
电话*
你把焦点弄得太复杂了。只需删除错误类


constuserinput=document.querySelectorAll（“.inputJs”）；
const userLabel=document.querySelectorAll（“.guestlist表单标签”）；
forEach（函数（输入，索引）{
const labelInput=userLabel[index]；
const errorClass='has error'
const blueClass='has blue'
addEventListener（“blur”，function（））{
var HASRERROR=input.value==“”
input.classList.toggle（errorClass，hasError）；
labelInput.classList.toggle（errorClass，hasError）；
labelInput.classList.remove（blueClass）；
});
input.addEventListener（“焦点”，函数（）{
input.classList.remove（errorClass）；
labelInput.classList.remove（errorClass）；
labelInput.classList.add（blueClass）；
})
});
.guestlist-form-label.has-blue{
颜色：蓝色；
}
.guestlist-form-label.has-error{
颜色：红色；
}
.inputJs.has-error{
边框：1px纯红；
}
.guestlist表单包装器{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
宽度：62%；
}
.guestlist表单包装器输入{
显示器：flex；
弯曲方向：立柱；
宽度：48%；
边缘顶部：25px；
}
.guestlist表单包装器输入标签{
颜色：#9b9b9b；
字体大小：14px；
边缘底部：5px；
}
.guestlist表单包装器输入{
背景色：透明；
边框：1px实心#9b9b；
填充：10px；
颜色：#ffffff；
}
.guestlist表单包装器输入：焦点{
大纲：无；
边框：1px实心#4990e2；
颜色：#4990e2；
-webkit盒阴影：0 10px 0 rgba（73,144,226,0.2）；
盒影：0 10px 0 rgba（73、144、226、0.4）；
}

名字*
姓*
电子邮件*
电话*
尊重你的风格，改变

userLabel.onfocus = function() {
  const textLabel = userLabel[index];

  if (userLabel.classList.contains("has-error")) {
    textLabel.classList.remove("has-error");
    textLabel.classList.add("has-blue");
  } else {
    textLabel.classList.remove("has-blue");
  }
};

到

我是
evt.onfocus = function() {
    userLabel[index].classList.remove("has-error");
};