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

Question

我正在尝试使用这样的 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>

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

Answer 1

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

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

指定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');
  });  
});