Javascript 表单验证-具有patterMismatch的函数不显示错误

我想知道是否有人能指出为什么带有

validity.patternmatch

的函数不显示相应的错误消息，而带有

validity.valueMissing

的函数却显示它

多谢各位

const inputs=document.querySelectorAll（“输入”）；
输入。forEach（函数（输入）{
const e_space=input.closest（“div div”）.querySelector（“.error”）；
addEventListener（“焦点”，函数（）{
if（input.classList.contains（“输入红色”））{
input.classList.remove（“输入红色”）
}
})
addEventListener（“blur”，function（））{
//模式不匹配-仍然需要将它们分隔为文本/数字/电子邮件
if（输入.有效性.模式不匹配）{
if（e_空间）{
e_space.textContent=“此字段只能包含来自a-z的字母”；
input.classList.add（“b-r”）；
}
input.classList.add（“输入红色”）；
}否则{
e_space.textContent=“”；
input.classList.remove（“b-r”）；
}
//如果是空的
input.value=input.value.trim（）；
if（输入.有效性.值缺失）{
if（e_空间）{
e_space.textContent=“此字段不能为空。”；
input.classList.add（“b-r”）；
}
input.classList.add（“输入红色”）；
}否则{
e_space.textContent=“”；
input.classList.remove（“b-r”）；
}
})
})

姓氏：*
电话号码：*

您的console中确实有一个错误，它说：

TypeError: can't access property \"querySelector\", input.closest(...) is null",

因此，请从以下目录中删除一个div：

closest("div div")

但您的主要问题是您的

else

在

有效性

检查中每次删除第一条消息时都会使用第二条：

e_space.textContent = "";

相反，删除那些

else

语句，并在以下情况下创建一个新的

：

if (input.validity.valueMissing === false && input.validity.patternMismatch === false) {
      e_space.textContent = "";
      input.classList.remove("b-r");
    }


const inputs=document.querySelectorAll（“输入”）；
输入。forEach（函数（输入）{
const e_space=input.closest（“div”）.querySelector（“错误”）；
addEventListener（“焦点”，函数（）{
if（input.classList.contains（“输入红色”））{
input.classList.remove（“输入红色”）
}
})
addEventListener（“blur”，function（））{
//模式不匹配-仍然需要将它们分隔为文本/数字/电子邮件
if（输入.有效性.模式不匹配）{
if（e_空间）{
e_space.textContent=“此字段只能包含来自a-z的字母”；
input.classList.add（“b-r”）；
}
input.classList.add（“输入红色”）；
}
//如果是空的
input.value=input.value.trim（）；
if（输入.有效性.值缺失）{
if（e_空间）{
e_space.textContent=“此字段不能为空。”；
input.classList.add（“b-r”）；
}
input.classList.add（“输入红色”）；
}
if（input.validity.valueMissing==false&&input.validity.patternmatch==false）{
e_space.textContent=“”；
input.classList.remove（“b-r”）；
}
})
})
姓氏：*
电话号码：*
阅读您的console.log错误并从那里开始，还有
valueMissingeven
应该是什么？显然不是函数或对象参数…控制台日志中没有错误。是规格部分之前的最后一个。谢谢您的回复。修复了js fiddle上最近的
问题。我会再次检查，但我确信我的控制台日志没有错误。给我一分钟。已检查，我的控制台日志中没有错误。谢谢。我认为这应该行得通。我会试试的。“谢谢你！”我说的话太琐碎了，不是胡闹。我没有去小提琴页面，这就是这里的片段；）。我有时叫他们拉小提琴。NP