checkValidity 函数未检测到“tel”类型的无效输入答案

【问题标题】：checkValidity function doesn't detect invalid input of type "tel"checkValidity 函数未检测到“tel”类型的无效输入
【发布时间】：2019-01-24 11:20:15
【问题描述】：

我正在尝试使用这样的 checkValidity 函数验证表单的输入

    let inputs = document.getElementsByTagName('input');
    inputs = Object.values(inputs);
    let textarea = document.getElementsByTagName('textarea');
    textarea = Object.values(textarea);
    inputs.push(textarea[0]);
    
    for(let i=0;i<inputs.length;i++){
    	inputs[i].addEventListener('keyup', function(){
    
    for(let i = 0;i<inputs.length;i++){
        inputs[i].addEventListener('change', function(){
          if($(inputs)[i].checkValidity()){
          $(inputs)[i].classList.remove('inputInvalid');
          $(inputs)[i].classList.add('inputValid');
        }else{
          $(inputs)[i].classList.remove('inputValid');
          $(inputs)[i].classList.add('inputInvalid');
        }
        })
      }
    
      });
    }

input.inputValid, textarea.inputValid{
  border-color:green;
}
input.inputInvalid, textarea.inputInvalid{
  border-color:red;
}

div{
  margin:10px 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <span>Name*</span>
    <input required type="text" size="40" class="text"/>
  </div>
  <div>
  <span>Company Name</span>
    <input type="text" size="40" class="text" />
  </div>
  <div>
    <span>Telephone*</span>
    <input required type="tel"  size="40" class="text" />
  </div>
  <div>
  <span>e-mail*</span>
    <input required type="text" name="param[email]" size="40" class="text" />
  </div>
  <div>
    <span>Text*</span>
    <textarea required cols="45" rows="8" class="text"></textarea>
  </div>

但它仅在具有required 属性的input 缺少值时才有效。当值类型不匹配时它不起作用，例如当我在电话input 中输入文本时，type 设置为tel。我该如何解决？

【问题讨论】：

标签： javascript jquery html forms validation

【解决方案1】：

未验证输入的tel 类型。截至mdn:input[tel]

因为世界各地的电话号码格式差异很大。

为输入指定pattern 属性。你可以使用任何你需要的正则表达式。

<input required type="tel"  pattern="\+?[\d]{5,40}" class="text" />

然后就像你写的那样：

let inputs = document.getElementsByTagName('input');

Array.from(inputs).forEach(input => {
  input.addEventListener('change', event => {
    if(input.checkValidity()){
      input.classList.remove('inputInvalid');
      input.classList.add('inputValid');
      return;
    }

    input.classList.remove('inputValid');
    input.classList.add('inputInvalid');
  });  
});

【讨论】：