javascript - 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>

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

Answer 1

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

because formats for telephone numbers vary so much around the world.

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