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>

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

Answer 1

输入的tel类型未得到验证。截至https://caniuse.com/#search=CSS%20clip

因为电话号码的格式在世界范围内变化很大。

为输入指定pattern属性。您可以使用所需的任何RegExp。

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

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

1 个答案: