jquery Form Validation Simple example _jquery

This example describes the simple use of jquery form validation. Share to everyone for your reference, specific as follows:

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

jquery form Validation

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

Register the page validation mechanism $ ("#username"). focus (function () {//with the focus () Form, execute the following code $ ("#username_error") when the cursor is in the input box. 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, executes the following code when the cursor leaves the input box $value = $.trim ($ (this). Val ());//Remove the space if the input data ($val
   Ue.length = = 0) {$ ("#username_error"). AddClass ("error"). HTML ("Learn number cannot be empty");
   $ (this). addclass ("highlight2");
  return false;
    else {$ (' #username_error '). Removeclass ("Focus"). html ("");
   $ (this). Removeclass ("highlight1");
     if ($.isnumeric ($value)) {if ($value. length = = one) {$ ("#username_succeed"). AddClass ("succeed");
     $ ("#username_error"). Removeclass ("error"). HTML ("");
    $ (this). Removeclass ("Highlight2") return true;
     $ ("#username_error"). AddClass ("error"). HTML ("The 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

. 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

<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 floating
 <div id= "Username_error" ></div>// The focus style is now if it does not meet the requirements.
</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.

More interested readers of jquery-related content can view this site: "jquery form Operation Summary", "jquery common Plug-ins and Usage summary", "jquery Ajax Usage Summary", "jquery table (table) Operation Tips Summary", " jquery drag-and-drop effects and tips summary, "jquery Extended Tips", "jquery common Classic Effects Summary", "jquery animation and special effects usage Summary" and "jquery Selector usage Summary"

I hope this article will help you with the jquery program design.