Heim > Artikel > Web-Frontend > Ein JavaScript-Beispiel zum Erkennen von Formulardaten_Javascript-Fähigkeiten

Ein JavaScript-Beispiel zum Erkennen von Formulardaten_Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 16:32:231329Durchsuche

Ein JavaScript-Beispiel zum Erkennen von Formulardaten. Es ist sehr einfach und praktisch. Interessierte können einen Blick darauf werfen.

  <!DOCTYPE html> 
  <html> 
  <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
  <title>每天一个JavaScript实例-检测表单数据</title> 
  <style> 
    [role="alert"]{ 
      background-color: #fcc; 
      font-weight: bold; 
      padding:5px; 
      border:1px dashed #000; 
    } 
    div{ 
      margin:10px 0; 
      padding:5px; 
      width:400px; 
      background-color: #fff; 
    } 
  </style> 
   
  <script> 
  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; 
    } 
  } 
  </script> 
   
  </head> 
   
  <body> 
  <form id = "testform"> 
    <div> 
      <label for="firstfield">*first Field:</label><br /> 
      <input id="firstfield" name = "firstfield" type = "text" aria-required = "true" /> 
    </div> 
   
    <div> 
      <label for="secondfield">Second Field:</label><br /> 
      <input id="secondfield" name = "secondfield" type = "text" /> 
    </div> 
   
    <div> 
      <label for="thirdfield">Third Field(numeric):</label><br /> 
      <input id="thirdfield" name = "thirdfield" type = "text" /> 
    </div> 
   
    <div> 
      <label for="fourthfield">Fourth Field:</label><br /> 
      <input id="fourthfield" name = "fourthfield" type = "text" /> 
    </div> 
   
    <input type="submit" value = "Send Data" /> 
  </form> 
   
  </body> 
  </html>

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beim Laden der Liste ruft jquery die Attribute des ersten li in ul_jquery abNächster Artikel：Beim Laden der Liste ruft jquery die Attribute des ersten li in ul_jquery ab

In Verbindung stehende Artikel

Mehr sehen