一個檢測表單數據的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> 新聞熱點
疑難解答
