폼 데 이 터 를 검사 하 는 자바 스 크 립 트 인 스 턴 스

   
   
   
   
   
   
   
   
  window.onload = function(){ 
    document.getElementById("thirdfield").onchange = validateField; 
    document.getElementById("firstfield").onblur = mandatoryField; 
    document.getElementById("testform").onsubmit = finalCheck; 
  } 
  function validateField(){ 
    removeAlert(); 
    if(!isNaN(parseFloat(this.value))){ 
      resetField(this); 
    }else{ 
      badField(this); 
      generateAlert("You entered an invalid value in Third Field. only numeric values such as 105 or 3.45 are allowed"); 
    } 
  } 
  function removeAlert(){ 
    var msg = document.getElementById("msg"); 
    if(msg){ 
      document.body.removeChild(msg); 
    } 
  } 
  function resetField(elem){ 
    elem.parentNode.setAttribute("style","background-color:#fff"); 
    var valid = elem.getAttribute("aria-invalid"); 
    if(valid) elem.removeAttribute("aria-invalid"); 
  } 
  function badField(elem){ 
    elem.parentNode.setAttribute("style","background-color#fee"); 
    elem.setAttribute("aria-invalid","true"); 
  } 
  function generateAlert(txt){ 
    var txtNd = document.createTextNode(txt); 
    msg = document.createElement("div"); 
    msg.setAttribute("role","alert"); 
    msg.setAttribute("id","msg"); 
    msg.setAttribute("class","alert"); 
   
    msg.appendChild(txtNd); 
    document.body.appendChild(msg); 
  } 
   
  function mandatoryField(){ 
    removeAlert(); 
    if(this.value.length > 0 ){ 
      resetField(this); 
    }else{ 
      badField(this); 
      generateAlert("You must enter a value into First Field"); 
    } 
  } 
  function finalCheck(){ 
    //console.log("aaa"); 
    removeAlert(); 
   
    var fields =document.querySelectorAll('input[aria-invalid="true"]'); 
    //var fields =document.querySelectorAll("input[aria-invalid='true']");//  ！！！ 
    console.log(fields); 
    if(fields.length > 0){ 
      generateAlert("You have incorrect fields entries that must be fixed before you can submit this form"); 
      return false; 
    } 
  }