form validation
(function(){ if(window.addEventListener) window.addEventListener("load",init,false); else if(window.attachEvent) window.attachEvent("onload",init); function init(){ for(var i=0;i<document.forms.length;i++) { var f=document.forms[i];//第i个form var needValidation = false;// Assume ,for now,that this form does not need any validation for(var j=0;j<f.elements.length;j++) { e = f.elements[j]; if(e.type!="text") continue; var pattern = e.getAttribute("pattern"); var required = e.getAttribute("required")!=null; //See if it has attribute that require validation if(required&&!pattern){ pattern = "\\s"; e.setAttribute("pattern",pattern); } if(e.pattern){ e.onchange = validateOnChange; needsValidation = true; } } if(needValidation) f.onsubmit = validateOnSubmit; } } function validateOnChange() { var textfield = this; var pattern = textfield.getAttribute("pattern"); var value = textfield/*this*/.value; if(value.search(pattern)==-1) textfield.classname = "invalid"; else textfield.classname = "valid"; } function validateOnSubmit() { var invalid = false; for(var i=0;i<this.elements.length;i++) { var e = this.elements[i]; if(e.type =="text" && e.onchange == validateOnChange){ e.onchange(); if(e.classname == "invalid") invalid = true; } } if(invalid){ alert("The form is incompletely or incorrectly filled out.\n "+"Please correct the highlighted field and try again"); return false; } } })();
transfer:
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style > input.invalid { background-color:#fa0;} </style> </head> <body> <form action="test.asp"> Name:<input type="text" name="name" required /><br /> email:<input type="text" name="email" pattern="^\s*\w+@\w+\.\w+\s*$" /><br /> zipcode:<input type="text" name="zip" pattern = "^\s*\d{5}\s*$" /><br> unvalidated:<input type="text" onchange='alert("test")' /><br /> <input type="submit" /> </form>