Use of the JQuery form plugin-Verify the form with the FormData parameter and submit it after verification (simple validation).

The form Plugin API provides a number of useful ways to easily process data and form submissions in a form.

Test environment: Deploy to a Web project in Tomcat.

First, the introduction of the dependency JS

<script src= "Jquery-1.3.1.js" type= "Text/javascript" ></script>   <script src= "Jquery.form.js" Type= "Text/javascript" ></script>

Second, initialize the callback function.

First, we initialize the form and give it a beforeSubmit callback function-This is a function to check.

$ (document). Ready (function() {      $ (' #myForm '). Ajaxform ({         target:// updates the contents of the ID OUTPUT1 with the data returned by the server.        Beforesubmit:  Validate    //  Pre-submission, verification     })   ;

Third, check the rules

functionValidate (FormData, Jqform, options) {//Formdata are array objects, each with a name and value.                    //the data is in the following format:                    // [                     //{name:username, value:usernamevalue},                    //{name:password, value:passwordvalue}                    // ]                      for(vari=0; i < formdata.length; i++) {                         if(!formdata[i].value) {Alert (' User name, address and self-introduction are not empty! '); return false; }                     }                   varqueryString = $.param (FormData);//Assembly Data                  //alert (queryString);//similar: name=1&add=2                  return true; }

Four, detailed code:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >$ (document). Ready (function() {                 $(' #myForm '). Ajaxform ({target:' #output1 ',//updates the contents of the ID OUTPUT1 with the data returned by the server.Beforesubmit:validate//before submitting, verify                });                        }); functionValidate (FormData, Jqform, options) {//Formdata are array objects, each with a name and value.                    //the data is in the following format:                    // [                     //{name:username, value:usernamevalue},                    //{name:password, value:passwordvalue}                    // ]                      for(vari=0; i < formdata.length; i++) {                         if(!formdata[i].value) {Alert (' User name, address and self-introduction are not empty! '); return false; }                     }                   varqueryString = $.param (FormData);//Assembly Data                  //alert (queryString);//similar: name=1&add=2                  return true; }   </script> Name:<input type= "text" name= "name" id= "name"/> <br/>Address:<input type= "text" name= "Address" id= "Address"/><br/>Self Introduction:<textarea name= "comment" id= "comment" ></textarea> <br/> <input type= "Submit" id= "test" value= "Submit"/> <br/> <div id= "output1" ></div> </form> </body>
Use of the JQuery form plugin-Verify the form with the FormData parameter and submit it after verification (simple validation).