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).