在 querySelectorAll("input") 只对特定类型执行某些操作之后答案

【问题标题】：After querySelectorAll("input") do something with only a specfic type在 querySelectorAll("input") 只对特定类型执行某些操作之后
【发布时间】：2021-02-20 16:24:57
【问题描述】：

我正在制作一个验证函数，它会为patternMismatch 显示适当的消息。

到目前为止，它会显示消息，但对于所有输入类型都是相同的。

const inputs = document.querySelectorAll("input");
inputs.forEach(function(input){

  input.addEventListener("blur", function() {

    if (input.validity.patternMismatch) {
      if (e_space) {
        e_space.textContent = "This field can only contain letters from a-z.";
        input.classList.add("b-r");
      }
    }

})

现在我正在尝试为不同的input types 显示不同的消息，但我似乎找不到选择特定类型的方法。

我尝试了if(input.type["text"])、if(input.type.text) 和if(input["type=text"]，但没有显示任何消息。

即：

if(input.type["text"]){
  if(input.validity.patternMismatch){
     if(e_space){
        e_space.textContent = "This field can only contain letters from a-z.";
        input.classList.add("b-r");
     }
  input.classList.add("input-red");
  }
}

欢迎任何帮助。谢谢。

fiddle

【问题讨论】：

标签： javascript queryselectall

【解决方案1】：

使用.matches 检查被迭代的输入是否匹配特定的选择器——例如，它是否具有属性：

if (input.matches('[type="text"]')) {

【讨论】：

【解决方案2】：

怎么样：

if (input.type=="text") { 
          //Whatever
}

【讨论】：