思洋互动网站建设学前班

第四、表单插件

表单插件（Form Plugin）是一款功能非常强大的插件，在jQuery官方网站上目前为4星级推荐，下载后为jquery.form.js文件。该插件提供获取表单数据、重置表单项目、使用Ajax提交数据等一系列功能，深受开发人员的喜爱。使用表单插件，再次重写“表单校验实例”，完整代码如下：
广州网站建设,网站建设,广州网页设计,广州网站设计

1. <form id="myform" action="action.asp">   
2. 用户昵称:<input type="text" onblur="startCheck(this)" name="User" id="User"><input type="button" value="检 查" class="button"><span id="UserResult"></span><br />   
3. 输入密码:<input type="password" name="passwd1"><br />   
4. 确认密码:</td><td><input type="password" name="passwd2"><br /><br />   
5. <input type="submit" value="注册" class="button"><input type="reset" value="重置" class="button">   
6. </form> 

HTML框架加了一个“检查”的按钮(使用手动校验的方法)，jQuery如下：

1. <script language="javascript" src="jquery.min.js"></script>   
2. <script language="javascript" src="jquery.form.js"></script>   
3. <script language="javascript">   
4. function startCheck(oInput){   
5.     //首先判断是否有输入，没有输入直接返回，并提示   
6.     if(!oInput.value){   
7.         oInput.focus(); //聚焦到用户名的输入框   
8.         document.getElementById("UserResult").innerHTML = "User cannot be empty.";   
9.         return;   
10.     }   
11. }   
12. $(function(){   
13.     $("input[type=button]").click(function(){   
14.         var options={   
15.             target: "#UserResult"   
16.         };   
17.         //表单的Ajax化   
18.         $("#myform").ajaxSubmit(options);   
19.     });   
20. });   
21. </script> 

必要说明：   1、使用表单插件，必须加载jquery.form.js文件。   2、按Ajax方式提交数据，可以使用表单插件的ajaxSubmit(options)来按照Ajax的方式直接提交表单或者使用ajaxform(options)方法，通常在页面加载完成时执行，用来将表单统一Ajax化，并且提交表单依然使用传统的submit按钮，只不过进行的是Ajax提交。其中参数options与$.ajax(options)的参数基本相同。
广州网站建设,网站建设,广州网页设计,广州网站设计