Form表单插件jquery.form.js

常常使用到这个插件，但是老忘记怎么使用，现在对大家写的进行一定的整合。

使用插件实例：

一般的使用方法

<!-- 引入jquery文件 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<!-- form表单 -->
    <form id="my_form" action="submit.php" method="post">
    <p>姓名：<input type="text" name="uname" id="uname" class="input"></p>
    <p>性别：<input type="radio" name="sex" value="1" checked> 男 <input type="radio"
    name="sex" value="2"> 女 </p>
    <p>年龄：<input type="text" name="age" id="age" class="input" style="width:50px"></p>
    <p style="margin-left:30px"><input type="submit" class="btn" value="提交">
    <span id="msg"></span></p>
    </form>
    <div id="output"></div> 

1. $(function(){
2. var options = {
3. beforeSubmit: showRequest, //提交前处理
4. success: showResponse, //处理完成
5. resetForm: true,
6. dataType: ‘json‘
7. };
8. $(‘#my_form‘).submit(function() {
9. $(this).ajaxSubmit(options);
10. });
11. });
12. function showRequest(formData, jqForm, options) {
13. var uname = $("#uname").val();
14. if(uname==""){
15. $("#msg").html("姓名不能为空！");
16. return false;
17. }
18. var age = $("#age").val();
19. if(age==""){
20. $("#msg").html("年龄不能为空！");
21. return false;
22. }
23. $("#msg").html("正在提交...");
24. return true;
25. }
26. function showResponse(responseText, statusText) {
27. $("#msg").html(‘提交成功‘);
28. var sex = responseText.sex==1?"男":"女";
29. $("#output").html("姓名："+responseText.uname+" 性别："+sex+" 年龄："+responseText.age);
30. }

options配置

Form表单插件jquery.form.js