A JavaScript example for detecting form data-JS Tutorial-php.cn

A JavaScript example for detecting form data

高洛峰

Release： 2017-01-23 17:32:43

Original

990 people have browsed it

A JavaScript example for detecting form data. It is very simple and practical. Interested friends can take a look at

<!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(&#39;input[aria-invalid="true"]&#39;); 
  //var fields =document.querySelectorAll("input[aria-invalid=&#39;true&#39;]");//错误！！！ 
  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>

Copy after login

For more related articles about a JavaScript example for detecting form data, please pay attention to the PHP Chinese website!