一个检测表单数据的JavaScript实例
一个检测表单数据的JavaScript实例,很简单,很实用,感兴趣的朋友可以看看
<!DOCTYPEhtml> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/> <title>每天一个JavaScript实例-检测表单数据</title> <style> [role="alert"]{ background-color:#fcc; font-weight:bold; padding:5px; border:1pxdashed#000; } div{ margin:10px0; 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; } functionvalidateField(){ removeAlert(); if(!isNaN(parseFloat(this.value))){ resetField(this); }else{ badField(this); generateAlert("YouenteredaninvalidvalueinThirdField.onlynumericvaluessuchas105or3.45areallowed"); } } functionremoveAlert(){ varmsg=document.getElementById("msg"); if(msg){ document.body.removeChild(msg); } } functionresetField(elem){ elem.parentNode.setAttribute("style","background-color:#fff"); varvalid=elem.getAttribute("aria-invalid"); if(valid)elem.removeAttribute("aria-invalid"); } functionbadField(elem){ elem.parentNode.setAttribute("style","background-color#fee"); elem.setAttribute("aria-invalid","true"); } functiongenerateAlert(txt){ vartxtNd=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); } functionmandatoryField(){ removeAlert(); if(this.value.length>0){ resetField(this); }else{ badField(this); generateAlert("YoumustenteravalueintoFirstField"); } } functionfinalCheck(){ //console.log("aaa"); removeAlert(); varfields=document.querySelectorAll('input[aria-invalid="true"]'); //varfields=document.querySelectorAll("input[aria-invalid='true']");//错误!!! console.log(fields); if(fields.length>0){ generateAlert("Youhaveincorrectfieldsentriesthatmustbefixedbeforeyoucansubmitthisform"); returnfalse; } } </script> </head> <body> <formid="testform"> <div> <labelfor="firstfield">*firstField:</label><br/> <inputid="firstfield"name="firstfield"type="text"aria-required="true"/> </div> <div> <labelfor="secondfield">SecondField:</label><br/> <inputid="secondfield"name="secondfield"type="text"/> </div> <div> <labelfor="thirdfield">ThirdField(numeric):</label><br/> <inputid="thirdfield"name="thirdfield"type="text"/> </div> <div> <labelfor="fourthfield">FourthField:</label><br/> <inputid="fourthfield"name="fourthfield"type="text"/> </div> <inputtype="submit"value="SendData"/> </form> </body> </html>