Form
<! DOCTYPE html Public"-//w3c//dtd XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >;} Table{margin:20px Auto;}</style><script type= "Text/javascript" src= "Js/checkform.js" ></script>class= "C1" > User name:</td> <td><input onchange= "Checkusername ();" type= "text" name= "username"/></td ></tr><tr> <TDclass= "C1" > Password:</td> <td><input onchange= "Checkpassword ();" type= "password" name= "PW"/></td> </tr><tr> <TDclass= "C1" > Duplicate password:</td> <td><input onchange= "Checkrepassword ();" type= "Password" name= "PW1"/></td ></tr><tr> <TDclass= "C1" > Email:</td> <td><input onchange= "Checkemail ();" type= "text" name= "email"/></td></ Tr><tr> <TDclass= "C1" > Gender:</td> <td> <input type= "Radio" name= "Sex" value= "male"/> male <br/> <input type= "R Adio "name=" Sex "value=" female "/> Women <br/> <input type=" Radio "name=" Sex "value=" secrecy "checked=" checked "/>Confidentiality</td></tr><tr> <TDclass= "C1" > Hobby:</td> <td> <input type= "checkbox" Name= "like[" "value= ' 1 '/> basketball <br/> <input type= "checkbox" Name= "like[]" value= ' 2 '/> soccer <br/> <input type= "checkbox" Name= "like[]" value= ' 3 '/>Badminton</td></tr><tr> <TDclass= "C1" > Phone:</td> <td><input onchange= "Checktel ()" type= "Text" name= "Tel"/></td></tr ><tr> <TDclass= "C1" > Introduction:</td> <td> <textarea name= "Intro" cols= "rows=" 6 "></textarea> </td>& Lt;/tr><tr> <td colspan= "2" ><input type= "submit" value= "register"/></td></tr></table ></form></body>JS form Verification
functionCheckusername () {//Verify the contents of the username. Requirements: The first character is a letter or underscore, the other consists of an underscore alphanumeric, a total of 4-20 bits varInputob=document.getelementsbyname (' username ') [0]; varV=inputob.value; if(/^[_a-za-z]\w{3,19}$/.Test (v)) {ShowMessage ("User name correct", ' username '); return true; }Else{showmessage ("User name error", ' username '); return false; }}functionCheckpassword () {//Requirements: Digital Alphabet _ 6-20 varV=document.getelementsbyname (' pw ') [0].value; if(/^\w{6,20}$/.Test (v)) {ShowMessage ("Password is correct", ' PW '); return true; }Else{showmessage ("Password error", ' PW '); return false; }}functionCheckrepassword () {//two times input password is consistent varV=document.getelementsbyname (' pw ') [0].value; varV1=document.getelementsbyname (' pw1 ') [0].value; if(v==v1) {ShowMessage (' two times password consistent ', ' PW1 '); return true; }Else{showmessage (' Two times password inconsistent ', ' PW1 '); return false; }}functionCheckemail () {//get the contents of the email box varV=document.getelementsbyname (' email ') [0].value; //validation, prompting if(/^\[email protected]\w+ (\.\w+) +$/.Test (v)) {ShowMessage (' Mailbox format correct ', ' email '); return true; }Else{showmessage (' Email format error ', ' email '); return false; }}functionChecktel () {//get the contents of the email box varV=document.getelementsbyname (' tel ') [0].value; //validation, prompting if(/^1[34578]\d{9}$/.Test (v)) {ShowMessage (' Phone format correct ', ' tel '); return true; }Else{showmessage (' Phone format error ', ' Tel '); return false; }}functionCheckform () {if(Checkusername () &&checkpassword () &&checkrepassword () &&checkemail () &&Checktel ()) { return true; }Else{ return false; }}//Information TipsfunctionShowMessage (Message,elementname) { //Create Div varDivob=document.createelement (' div '); Divob. innerhtml=message; //get the upper-right corner of the elementname position varCob=document.getelementsbyname (elementname) [0]; varT=cob.OffsetTop; varL=cob.offsetleft+cob.offsetwidth; //Remove all the div from the TD varDivlist=cob.parentnode.getelementsbytagname (' div '); for(vari=divlist.length-1;i>=0;i--) {cOb. parentnode.removechild (Divlist[i]); } cOb. Parentnode.insertbefore (Divob,cOb); COb. parentnode.style.position= ' relative '; Divob. style.position= ' Absolute '; Divob. style.zindex=1000; Divob. style.left=l+ "px"; Divob. style.top=t+ "px"; Divob. style.border= "1px solid Orange"Divob. style.padding= ' 1px 3px '; Divob. style.fontsize= "12px";}
JavaScript form Validation