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

2019-11-19 17:51:33

字体：大中小

来源：转载

供稿：网友

传统的表单提交，都是页面跳转的形式，但是现在更流行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也有状态值和服务端的返回数据，想怎么处理怎么处理。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：jquery表单验证插件validation使用方法详解

下一篇：AngularJs上传前预览图片的实例代码