一个检测表单数据的JavaScript实例

前端技术 2023/09/07 JavaScript

一个检测表单数据的JavaScript实例，很简单，很实用，感兴趣的朋友可以看看

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

本文地址：https://www.stayed.cn/item/19955

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案