jquery表单插件form使用方法详解

来源：华拓科技网

传统的表单提交，都是页面跳转的形式，但是现在更流行ajax提交，那么如果希望有表单提交的简便，也有ajax的效果，有什么解决办法吗？

怎么使用

两种使用方式：

第一种方式

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="js/jquery-1.9.1.min.js"></script>
 <script src="js/jquery-form.js"></script>
 <script>
 // 使用ajaxForm
 $(function(){
 $("#myForm").ajaxForm(function(){
 $("#output1").html("提交成功").show();
 })
 })
 </script>
</head>
<body>
 <form id="myForm">
 <input type="text" name="username">
 <input type="text" name="password">
 <input type="submit" value="提交">
 <div id="output1" style="display: none"></div>
 </form>
</body>
</html>

第二种方式

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="js/jquery-1.9.1.min.js"></script>
 <script src="js/jquery-form.js"></script>
 <script>
 $(function(){
 //方式二 与方式一效果一样
 $("#myForm").submit(function(){
 // 使用ajaxSubmit
 $(this).ajaxSubmit(function(){
 $("#output1").html("提交成功").show();
 });
 return false;
 })
 })
 </script>
</head>
<body>
 <form id="myForm">
 <input type="text" name="username">
 <input type="text" name="password">
 <input type="submit" value="提交">
 <div id="output1" style="display: none"></div>
 </form>
</body>
</html>

感觉上第一种要更方便一点。
其中的参数function()是提交成功后的回调函数。

利用这种提交方式，可以实现异步表单提交，很方便。但是，还是有点不满足，比如说，我可能想在提交表单之前验证一下，虽然可以手动地在提交表单动作之外完成，但是很麻烦。form插件有没有继承这样的功能呢？

二、options参数

上面只讲了form中的一个function回调函数参数，其实它还有一个参数，就是options。有什么用呢？

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="js/jquery-1.9.1.min.js"></script>
 <script src="js/jquery-form.js"></script>
 <script>
 
 var options = {
 target:'#output1', // 把服务器返回的内容放入id为output1的元素中
 beforeSubmit: fun1, // 提交前的回调函数
 success: fun2, // 提交后的回调函数
 dataType: // 接收服务端返回的类型 xml,scrpit,json
 };
 
 // beforeSubmit前可以作验证
 function fun1(formData,jqForm,options){
 // formData 提交值的数组对象
 // jqForm 表单元素的jQuery对象，jqForm[0]是其dom对象
 // 该函数如果返回false，则阻止表单提交
 
 // formData可以判断全部不为空的情况
 for(var i=0;i<formData.length;i++){
 if(!formData[i].value){
 alert("都不能为空");
 return false;
 }
 }
 
 // jqForm可以判断某个不为空的情况
 var form = jqForm[0];
 if(!form.name.value){
 alert("name不能为空");
 return false;
 }
 
 // fieldValue()可以获取多值的数组形式，如checkbox
 var value = $('input[name=name]').fieldValue();
 if(!value[0]){
 return false;
 }
 }
 function fun2(responseText, statusText){
 // 根据dataType不同responseText解析方式不同，
 // 默认 responseText
 // xml responseXml以xml解析
 // json responseJson
 }
 
 $(function(){
 //方式二 与方式一效果一样
 $("#myForm").ajaxForm(options); // 要想使options生效，需要作为参数传递
 })
 </script>
</head>
<body>
 <form id="myForm">
 <input type="text" name="username">
 <input type="text" name="password">
 <input type="submit" value="提交">
 <div id="output1" style="display: none"></div>
 </form>
</body>
</html>

可以看出，在beforeSubmit的回调函数fun1中，我们有三种方式获取表单数据 formData，jqForm，fieldValue 满足了各种获取值的方式，想怎么验证怎么验证。只要返回false就能阻止表单提交sucess回调的fun2也有状态值和服务端的返回数据，想怎么处理怎么处理。