Form validation Templates

span{Font-size:12px; }. stats1{color: #aaa;<!--default Gray--}. stats2{color:#000;            }. stats3{color:red;            }. stats4{Color:green; }                    </style> Username:<input type= "text" name= "username" value= "" > <spanclass= "Stats1" > Please enter user name </span><br/>Password:<input type= "password" name= "password" value= "" > <spanclass= "Stats1" > Please enter password </span><br/>Repass:<input type= "Password" name= "Repass" value= "" > <spanclass= "Stats1" > Please enter your password again </span></br/>Email:<input type= "text" name= "email" value= "" > <spanclass= "Stats1" > enter your email address </span><br/>Other :<input type= "text" Name= "other" value= "" > <spanclass= "Stats1" > Please enter other </span><br/> <input type= "Submit" Name= "sub" value= "Submit" > &LT;/FO Rm> </body>//Automatic call after page loadOnload=regs;//a function that can be called using onsubmit, or it can be invoked using the onloadfunction Regs (SUBM) {//we submit the form directly will not be verified, how to solve it? We need to make the function to judge, directly click on the submission of the time to get a signal, all validation is executed, using parametersvar stat=true; var username=document.getelementsbyname ("username") [0]; var password=document.getelementsbyname ("password") [0]; var repass=document.getelementsbyname ("Repass") [0]; var email=document.getelementsbyname ("email") [0]; var other=document.getelementsbyname ("other") [0]; //to save the code, use the next sibling to get span//alert (username.nextSibling.nodeName); it is possible that the control is preceded by a space or a picture, so we use a small algorithm to get the span//alert (Gspan (username). nodeName);Check (username, "The length of the user name should be between 3-20", Function (val) {//if (Val.match (/^\s+$/) && val.length>=3 &&username.value.length<=20) {        if(Val.match (/^\s{3,20}$/)){            return true; }Else{stat=false; return false;        }},SUBM); Check (password,"Password must be between 6-20 bits", Function (val) {//if (Val.match (/^\s+$/) && val.length>=6 &&val.length<=20) {        if(Val.match (/^\s{6,20}$/)){            return true; }Else{stat=false; return false;        }},SUBM); Check (Repass,"Confirm the password to be consistent with the above, the same rules.", Function (val) {//if (Val.match (/^\s+$/) && val.length>=6 &&val.length<=20 && val==password.value) {         if(Val.match (/^\s{3,20}$/) && val==password.value) {             return true; }Else{stat=false; return false;        }},SUBM); Check (email,"To enter by mailbox rule", Function (val) {if(Val.match (/\[email protected]\w+\.\w+/)){            return true; }Else{stat=false; return false;    }},SUBM); returnStat;} function Gspan (cobj) {//find the next span     while(true){        if(cobj.nextsibling.nodename!= "SPAN") {CObj=cobj.nextsibling; }Else{            returncobj.nextsibling; }            }    }/*General Inspection Method: The first parameter: obj, the object used to check the second parameter: info, the hint that is used to check the third parameter: fun, used to check whether the value is entered as a condition fourth parameter: SUBM, State determination, Whether you click Submit or lose Focus*/function Check (OBJ,INFO,FUN,SUBM) {var sp=Gspan (obj); Obj.onfocus=function () {//Get focus Tips//var sp=gspan (username);Sp.innerhtml=Info Sp.classname= "Stats2"; } Obj.onblur=function () {//if (Username.value.match (/^\s+$/) && username.value.length>=3 &&username.value.length<= ) {        if(Fun ( This. Value)) {sp.innerhtml= "Input correct"; Sp.classname= "STATS4"; }Else{sp.innerhtml=info; Sp.classname= "Stats3"; }    }    if(subm== "Submit") {Obj.onblur (); }}

Form validation Templates