Simple Example of jQuery form verification, jquery form example

Simple Example of jQuery form verification, jquery form example

This example describes the simple usage of jQuery form verification. We will share this with you for your reference. The details are as follows:

I have been working on a form verification page for the past few days. In order to achieve a friendly interface, I copied the page of 360buy and imitated a page.

Jquery Form Verification

All information in the verification form is required.

// Registration page verification mechanism $ ("# username "). focus (function () {// use the focus () form. When the cursor is in the input box, execute the following code $ ("# username_error "). removeClass ("error" 2.16.html (""); $ ("# username_succeed "). removeClass ("succeed"); $ (this ). removeClass ("highlight2") $ ("# username_error "). addClass ("focus" example .html ("student ID must consist of 11 digits. For example: 104084002xx "); $ (this ). addClass ("highlight1") ;}; $ ("# username "). blur (function () {// use the blur () form. When the cursor leaves the input box, run the following code $ value = $. trim ($ (this ). val (); // remove the Left and Right spaces of the input data if ($ value. length = 0) {$ ("# username_error "). addClass ("error" ).html ("student ID cannot be blank"); $ (this ). addClass ("highlight2"); return false;} else {$ ("# username_error "). removeClass ("focus" example .html (""); $ (this ). removeClass ("highlight1"); if ($. isNumeric ($ value) {if ($ value. length = 11) {$ ("# username_succeed "). addClass ("succeed"); $ ("# username_error "). removeClass ("error" 2.16.html (""); $ (this ). removeClass ("highlight2") return true;} $ ("# username_error "). addClass ("error" ).html ("student ID must be 11 bits"); $ (this ). addClass ("highlight2"); return false ;}$ ("# username_error "). addClass ("error" Expected .html ("student ID must be a number"); $ (this ). addClass ("highlight2"); return false ;}});

The above is part of the JQUERY code, and the student ID is displayed now and the effect is displayed. The following is the code list 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;}

Some HTML code is also listed

<Div> <span> <B> * </B> Student ID: </span> <input type = "text" id = "username" name = "userid"/> <label id = "username_succeed"> </label> // if required add the SUCCEED style here. Otherwise, hide <span class = "clr"> </span> // clear the floating <div id = "username_error"> </div> // The focus style if it does not meet the requirements.. </Div>

This completes the verification of the input student ID field. The effect is friendly.

The verification of other input boxes is based on the sample image. There are no difficulties.

Principle:

Is to add CLASS and remove CLASS. To achieve the effect.