Home >Web Front-end >JS Tutorial >A JavaScript example for detecting form data_javascript skills

A JavaScript example for detecting form data_javascript skills

WBOYOriginal: 2016-05-16 16:32:231382browse

A JavaScript example for detecting form data. It is very simple and practical. Friends who are interested can take a look

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：When loading the list, jquery gets the attributes of the first li in ul_jqueryNext article：When loading the list, jquery gets the attributes of the first li in ul_jquery

See more

A JavaScript example for detecting form data_javascript skills

Related articles