在 querySelectorAll("input") 之后只对特定类型做一些事情

Question

我正在制作一个验证函数，它会显示 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 type 显示不同的消息，但我似乎无法找到 select 特定类型的方法。

我已尝试 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

Answer 1

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

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

Answer 2

怎么样：

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

在 querySelectorAll("input") 之后只对特定类型做一些事情

After querySelectorAll("input") do something with only a specfic type

javascript

queryselectall