Get focus prompt for jquery form verification

These days has been doing a form verification page, in order to achieve a friendly interface, deliberately copied the 360buy page, imitation wrote a page

is to verify that the information in the form is mandatory.

The code is as follows

Copy Code

Registering the page validation mechanism $ ("#username"). focus (function () {//with the focus () Form, execute the following code when the cursor is in the input box $ ("#username_error"). Removeclass ("error"). HTML (""); $ ("#username_succeed"). Removeclass ("succeed"); $ (this). Removeclass ("Highlight2") $ ("#username_error"). AddClass ("Focus"). HTML ("The school number must consist of 11 digits.") such as: 104084002xx "); $ (this). addclass ("highlight1"); }); $ ("#username"). blur (function () {//blur () Form, execute the following code when the cursor leaves the input box $value = $.trim ($ (this). Val ()); Remove the space around the input data if ($value. length = 0) { $ ("#username_error"). AddClass ("error"). HTML ("The school number cannot be empty"); $ (this). addclass ("highlight2"); return false; } Else { $ ("#username_error"). Removeclass ("Focus"). html (""); $ (this). Removeclass ("highlight1"); if ($.isnumeric ($value)) { if ($value. length = 11) { $ ("#username_succeed"). AddClass ("succeed"); $ ("#username_error"). Removeclass ("error"). HTML (""); $ (this). Removeclass ("Highlight2") return true; } $ ("#username_error"). AddClass ("error"). HTML ("School number must be 11 bits"); $ (this). addclass ("highlight2"); return false; } $ ("#username_error"). AddClass ("error"). HTML ("School number must be number"); $ (this). addclass ("highlight2"); return false; } });

The above is the jquery part of the code, it is done, the number of the current and effect of the display. The following is a code listing of the styles used

The code is as follows	Copy Code
. highlight1 {       border:1px solid #EFA100;       outline:2px solid #FFDC97;            } . highlight2            {        BORDER:1PX solid #f00;       outline:1px solid #FFC1C1;       color: #f00;           } . focus{      color: #999;      line-height:22px       Text-align:center;      } . succeed{      background:url (images/pwdstrength.gif) no-repeat-105px 0;         }

Also enumerate some of the HTML code

The code is as follows	Copy Code
<div> <span><b>*</b> School Number:</span> <input type= "text" id= "username" name= "userid"/> <label id= "Username_succeed" ></label>//If the requirements are met, add the succeed style here. otherwise hide <span class= "CLR" ></span>//Clear float <div id= "Username_error" ></div>//The focus style is present if the requirement is not met. </div>

This completes the validation of the input Number field. Effect friendly.
The validation of the other input boxes is dots. There is no difficulty.

Principle:

is to add class and remove class. Achieve results.