jQuery插件之jquery的form插件使用示例

jQuery插件之jquery的form插件使用示例

2010年05月02日

　　jQuery插件之jquery的form插件使用示例：ajax登入和上傳

　　發表時間：2009-6-7 15:59:58 | 來源：亮亮的部落格 | 字号：【大 中 小】| 顔色：【紅 藍 綠】

　　jquery的form插件應該是一個使用的比較平凡的插件了，利用form插件，可以很容易實作表單的無重新整理送出，我在這裡隻提供兩個簡單的示例，因為我英文不懂，無法比較詳細的翻譯原文，有興趣的自己去看英文文檔。

　　form插件的基本使用：

　　options={

　　url:'upload.asp',

　　beforeSubmit: showRequest,

　　success: showResponse

　　};

　　$("#form1").ajaxForm(options);

　　url就是form表單要送出到的位址，當然若不指定，會自動使用form裡action的值。

　　beforeSubmit的值是函數，就是送出表單前要做的事，一般用來驗證表單。

　　success的值也是函數，就是送出表單處理完後要做的事。

　　至于取得表單中某些控件的值得方法就很簡單了

　　queryString = $('#form1').formSerialize();

　　取得id為form1的表單裡所有控件的值，以name1=value1&name2=value2的方式存儲

　　queryStr=$("#form1 input[@type='text']").fieldSerialize();

　　取得所有input的type為text的值，以name1=value1&name2=value2的方式存儲

　　iptVal=$("#form1 input[@name='rbt']").fieldValue();

　　取得name為rbt的input的值。

　　好了，現在看看示例，下面的示例示範無重新整理登入

　　

　　

　　 程式代碼

　　$(document).ready(function(){

　　//var queryStr=$("#form1").formSerialize();

　　//var queryStr=$("#form1 input[@type='text']").fieldSerialize();

　　//var queryStr=$("#form1 input[@name='rbt']").fieldValue();

　　options={

　　//url:'upload.asp',

　　beforeSubmit: showRequest,

　　success: showResponse

　　};

　　$("#form1").ajaxForm(options);

　　function showRequest(){

　　var userVal=$("input[@name='userName']").fieldValue();

　　var passVal=$("input[@name='password']").fieldValue();

　　if(userVal==""||passVal==""){

　　alert("使用者名或密碼不能為空");

　　return false;

　　}

　　else{

　　$("#ui").css("display","none");

　　$("#wait").css("display","block");

　　return true;

　　}

　　}

　　function showResponse(responseText){

　　var msg=responseText;

　　if(msg==1){

　　$("#wait").css("display","none");

　　$("#suc").css("display","block");

　　//也可把上面兩句注釋掉用下面的語句

　　//window.location.href="登陸成功轉向頁面" target="_blank" rel="external nofollow" ;

　　}

　　else if(msg==2){

　　alert("登陸失敗：密碼不正确");

　　$("#ui").css("display","block");

　　$("#wait").css("display","none");

　　}

　　else if(msg==3){

　　alert("登陸失敗：不存在該使用者");

　　$("#ui").css("display","block");

　　$("#wait").css("display","none");

　　}

　　}

　　});

　　很簡單吧！看看效果

　　這個就是示範無重新整理上傳的

　　

　　

　　 程式代碼

　　$(document).ready(function(){

　　//var queryStr=$("#form1").formSerialize();

　　//var queryStr=$("#form1 input[@type='text']").fieldSerialize();

　　//var queryStr=$("#form1 input[@name='rbt']").fieldValue();

　　options={

　　url:'upload.asp',

　　beforeSubmit: showRequest,

　　success: showResponse

　　};

　　$("#form1").ajaxForm(options);

　　function showRequest(){

　　var txt1Val=$("input[@name='txt1']").fieldValue();

　　var upfileVal=$("input[@name='upfile']").fieldValue();

　　var msg="";

　　if(txt1Val=="") msg=msg+"\n輸入域不能為空";

　　if(upfileVal=="") msg=msg+"\n沒有選擇上傳檔案";

　　else{

　　var m=parseInt(upfileVal.toString().lastIndexOf("."))+1;

　　var extVal=upfileVal.toString().substr(m);

　　if(extVal!="txt") msg=msg+"\n隻能上傳字尾為txt的檔案（文本檔案）";

　　}

　　if(msg==""){

　　$("#btn").css("display","none");

　　$("#loading").css("display","block");

　　return true;

　　}

　　else{

　　alert(msg);

　　return false;

　　}

　　}

　　function showResponse(responseText){

　　alert(responseText);

　　$("#btn").css("display","block");

　　$("#loading").css("display","none");

　　}

　　});

　　看看效果

　　好了，去試試吧，有什麼問題在下面留言！！