JavaScript realizes imitation NetEase pass form verification

This article mainly introduces the JavaScript implementation of Imitation NetEase pass form verification, very practical, the need for small partners can refer to.

Introduce the form verification, good OH:

As shown in figure

CSS Code

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103-104

@charset "gb2312";/* CSS Document */  body,dl,dt,dd,div,form {padding:0; margin:0;}   #header, #main {width:650px margin:0 auto; bg{background-image:url (.. /images/register_bg.gif); Background-repeat:no-repeat; width:6px; height:6px; }. bg_top_left{background-position:0px 0px; bg_top_right{background-position:0px-6px; bg_end_left{ background-position:0px-12px; }. bg_end_right{background-position:0px-18px. bg_top{border-top:solid 1px #666666; bg_end{border-bottom:solid 1p x #666666; }. bg_left{border-left:solid 1px #666666; bg_right{border-right:solid 1px #666666;}    . content{padding: 10px; inputs{border:solid 1px #a4c8e0 width:150px; height:15px;}   userwidth{width:110px; content div{Float:lef T font-size:12px; Color: #000; } dl{Clear:both;} dt,dd{float:left; dt{, width:130px; text-align:right; font-size:14px; dd{font-size:12px; color: #666666; width:180px; /* When the mouse is placed in the text box, the style of the prompt text/import_prompt{border:solid 1px #ffcd00; Background-color: #ffffda; padding-left:5px; padding-right:5px; line-height:20px; */* When the text box content does not meet the requirements, the style of the prompt text/error_prompt{border:solid 1px #ff3300 background-color: #fff2e5, Background-image:url (. /images/li_err.gif); Background-repeat:no-repeat; BACKGROUND-POSITION:5PX 2px; padding:2px 5px 0px 25px; line-height:20px; /* * When the text box content is entered correctly, the style of the prompt text/ok_prompt{border:solid 1px #01be00 background-color: #e6fee4, Background-image:url (. /images/li_ok.gif); Background-repeat:no-repeat; BACKGROUND-POSITION:5PX 2px; padding:2px 5px 0px 25px; line-height:20px; }

Js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5, 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 11 9 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148-149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179-18 0 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196-197

JavaScript Document  /* A common method for obtaining HTML objects by ID, using $ instead of function name/function $ (elementid) {return document.getElementById ( ElementID);  /* When the mouse is placed in the Passport User name text box, the prompt text and style * * Function Usernamefocus () {var usernameid=$ ("Usernameid"); Usernameid.classname= " Import_prompt "; Usernameid.innerhtml= "1, composed of letters, numbers, underscores, dots, minus signs <br/>2, only with numbers, letters beginning or ending, and length of 4-18";  /* When the mouse leaves the Pass User name text box, prompt text and style */function Usernameblur () {var username=$ ("UserName"); var usernameid=$ ("Usernameid "); var reg=/^[0-9a-za-z][0-9a-za-z_.-]{2,16}[0-9a-za-z]$/; if (username.value== "") {usernameid.classname= "error_prompt"; usernameid.innerhtml= "the pass user name cannot be null, please enter the pass user name"; return False } if (Reg.test (username.value) ==false) {usernameid.classname= "error_prompt"; usernameid.innerhtml= "1, letters, numbers, underscores, dots, The minus sign is composed of <br/>2, only the number, the beginning or the end of the letter, and the length is 4-18 "; return false; } usernameid.classname= "Ok_prompt"; Usernameid.innerhtml= "Pass user name input correct"; return true;  /* When the mouse is placed in the Password text box, the prompt text and style * * Function Pwdfocus () {var pwdid=$ ("Pwdid"); Pwdid.classname= "Import_prompt"; Pwdid.innerhtml= "Password length is 6-16";   * * When the mouse leaves the password text box, prompt text and style/function Pwdblur () {var pwd=$ ("pwd"); var pwdid=$ ("Pwdid"); if (pwd.value== "") { Pwdid.classname= "Error_prompt"; Pwdid.innerhtml= "Password cannot be blank, please enter password"; return false; } if (Pwd.value.length<6 | | pwd.value.length>16) {pwdid.classname= "error_prompt"; pwdid.innerhtml= "password length is 6-16"; return false; } pwdid.classname= "Ok_prompt"; pwdid.innerhtml= "Password input correct"; return true;    /* When the mouse leaves the duplicate password text box, prompt text and style/function Repwdblur () {var repwd=$ ("Repwd"); var pwd=$ ("pwd"); var repwdid=$ ("Re Pwdid "); if (repwd.value== "") {repwdid.classname= "error_prompt"; repwdid.innerhtml= "duplicate password cannot be empty, repeat password"; return false;} if ( Repwd.value!=pwd.value) {repwdid.classname= "error_prompt"; repwdid.innerhtml= "two input passwords are inconsistent, please re-enter"; return false;} Repwdid.classname= "Ok_prompt"; Repwdid.innerhtml= "two times password input correct"; return true;  /* When the mouse is placed in the nickname text box, the prompt text and style * * Function Nicknamefocus () {var nicknameid=$ ("Nicknameid"); Nicknameid.classname= " Import_prompt "; Nicknameid.innerhtml= "1, including Chinese characters, letters, numbers, underscores and @!#$%&* special characters <br/>2, length of 4-20 characters <br/>3, one Chinese characters for two characters ";  /* When the mouse leaves the nickname text box, prompt text and style/function Nicknameblur () {var nickname=$ ("nickname"); var nicknameid=$ ("Nicknameid"); var k=0; var reg=/^ ([u4e00-u9fa5]|w|[ @!#$%&*]) +$/; Match nickname Var chinareg=/[u4e00-u9fa5]/g; Match Chinese character if (nickname.value== "") {nicknameid.classname= "error_prompt"; nicknameid.innerhtml= "nickname cannot be empty, please enter nickname"; return False } if (Reg.test (nickname.value) ==false) {nicknameid.classname= "error_prompt"; nicknameid.innerhtml= "only by Chinese characters, letters, numbers, Underline and @!#$%&* special characters "; return false; }   var len=nickname.value.replace (Chinareg, "AB"). Length; Converts the Chinese characters to two letters to calculate the character length if (len<4| | LEN>20) {nicknameid.classname= "error_prompt"; nicknameid.innerhtml= "1, length is 4-20 characters <br/>2, one Chinese character occupies two characters"; return false; }   Nicknameid.classname= "Ok_prompt"; Nicknameid.innerhtml= "nickname input correct"; return true;  /* When the mouse is placed in the associated cell phone number text box, the prompt text and style * * Function Telfocus () {var telid=$ ("Telid"); Telid.classname= "Import_prompt"; Telid.innerhtml= "1, mobile phone number to 13,15,18 opening <br/>2, mobile phone number composed of 11 digits;  /* When the mouse leaves the associated cell phone number text box, prompt text and style * * Function Telblur () {var tel=$ ("tel"); var telid=$ ("Telid"); var reg=/^ (13|15|18) d{9} $/; if (tel.value== "") {telid.classname= "error_prompt"; telid.innerhtml= "The associated mobile number cannot be empty, please enter the associated mobile number"; return false;} if ( Reg.test (Tel.value) ==false) {telid.classname= "error_prompt"; telid.innerhtml= "the associated cell phone number is entered incorrectly, please re-enter"; return false;} Telid.classname= "Ok_prompt"; Telid.innerhtml= "Related mobile phone number input correct"; return true;    /* When the mouse is placed in the confidential mailbox text box, the prompt text and style */function Emailfocus () {var emailid=$ ("Emailid"); Emailid.classname= "Import_ Prompt "; Emailid.innerhtml= "Please input your commonly used e-mail";  /* When the mouse leaves the confidential mailbox text box, prompt text and style * * Function Emailblur () {var email=$ ("email"); var emailid=$ ("Emailid"); var reg=/^w+@w+ (. [A-za-z] {2,3}) {1,2}$/; if (email.value== "") {emailid.classname= "error_prompt"; emailid.innerhtml= "Confidential mailbox cannot be empty, please enter a confidential mailbox"; return false;} if ( Reg.test (Email.value) ==false) {emailid.classname= "error_prompt"; emailid.innerhtml= "the confidential mailbox is not in the correct format, please re-enter"; return false ; } EMailid.classname= "Ok_prompt"; Emailid.innerhtml= "Confidential mailbox input correct"; return true;  /* Validation of form content input on form submission */function Checkform () {var flagusername=usernameblur (); var flagpwd=pwdblur (); var Flagrepwd=repwdblur (); var flagnickname=nicknameblur (); var flagtel=telblur (); var flagemail=emailblur ();   Usernameblur (); Pwdblur (); Repwdblur (); Nicknameblur (); Telblur (); Emailblur ();   if (flagusername==true &&flagpwd==true &&flagrepwd==true &&flagNickName==true& &flagtel==true&flagemail==true) {return true;} else{return false;}  }

Html

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5 86 87 88 89 90 91 92 93

! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> New User Registration page </title> <link type=" text/css "rel=" stylesheet "href=" css/ Register.css "/> <script type=" Text/javascript "src=" Js/register.js "></script> </head>   <body> <div id= "header" ><img src= "Images/register_logo.gif" alt= "logo"/></div> <div "id=" Main "> <table width=" 100% "border=" 0 "cellspacing=" 0 "cellpadding=" 0 "> <tr> <td class=" BG Bg_top_left "></td> <td class=" bg_top "></td> <td class=" bg bg_top_right "></td> </tr> < tr> <td class= "Bg_left" ></td> <td class= "Content" > <form action= "" method= "Post" name= "MyForm" Onsubmit= "return Checkform ()" > <dl> <dt> Pass user name: ≪/dt> <dd><input type= "text" id= "UserName" class= "Inputs userwidth" onfocus= "Usernamefocus" () "onblur=" Usernameblur () "/> @163.com</dd> <div id=" Usernameid "></div> </dl> <dl> <dt> Login password:</dt> <dd><input type= "password" id= "pwd" class= "inputs" onfocus= "Pwdfocus" () "onblur=" Pwdblur () " /></dd> <div id= "Pwdid" ></div> </dl> <dl> <dt> Repeat login password:</dt> <dd> <input type= "Password" id= "repwd" class= "inputs" onblur= "Repwdblur ()"/></dd> <div id= "RepwdId" > </div> </dl> <dl> <dt> gender:</dt> <dd><input name= "Sex" type= "Radio" "Value=" " checked= "Checked"/> male <input name= "Sex" type= "Radio" value= ""/> Women </dd> </dl> <dl> <dt> Real name:</dt> <dd><input type= "text" id= "realname" class= "inputs" onblur= "AA ()"/></dd> </dl > <dl> <dt> nickname:</dt> <dd><input type= "text" id= "nIckname "class=" inputs "onfocus=" Nicknamefocus () "onblur=" Nicknameblur () "/></dd> <div id=" NickNameId " ></div> </dl> <dl> <dt> associated mobile phone number:</dt> <dd><input type= "Text" id= "tel" class= " Inputs "onfocus=" Telfocus () "onblur=" Telblur () "/></dd> <div id=" Telid "></div> </dl> < Dl> <dt> Confidential mailbox:</dt> <dd><input type= "text" id= "email" class= "inputs" onfocus= "Emailfocus" () Onblur= "Emailblur ()"/></dd> <div id= "Emailid" ></div> </dl> <dl> <dt></dt > <dd><input name= "" type= "image" Src= "Images/button.gif"/></dd> </dl> </form> </ td> <td class= "bg_right" ></td> </tr> <tr> <td class= "bg Bg_end_left" ></td> < TD class= "Bg_end" ></td> <td class= "bg bg_end_right" ></td> </tr> </table>   </ div> </body> <script type= "Text/javascript" > function AA() {  var reg =/^[u4e00-u9fa5]$/var name = document.getElementById ("Realname"). Value   if (reg.test (name) ==f Alse) {alert ("only Kanji");} else{alert ("correct");}  } </script>   </html>

The above is the entire contents of this article, I hope you can enjoy.