JQuery中ajax非同步驗證表單簡單一實例

$.get和$.post方法一樣，第一個參數是地址，第二個是傳的值，第三個是成功後的回呼函數
post方法：

代碼如下

複製代碼

function emailb(){ var email = $("#email").val(); if(email==""){ $("#inf_email").replaceWith('<span id="inf_email"><img src="/public/img/check_false.gif"> <font color="red">Email地址不可為空</font></span>'); } else{ $.post("/index.php/Index/checkEmail2",{"email":email,"randnum":Math.random()+''},function (res){ if(res=='1'){ $("#inf_email").replaceWith('<span id="inf_email"><img src="/public/img/check_true.gif"> <font color="green">可以使用</font></span>'); } else{ $("#inf_email").replaceWith('<span id="inf_email"><img src="/public/img/check_false.gif"> <font color="red">'+res+'</font></span>'); } }); } }

get方法：

代碼如下

複製代碼

var p = new prompts(); $('#username').blur(function(){ var username = $('#username').val();    //擷取表單值 if(username == ''){ p.p('#user_prompt','p1','p2 p3','大小寫英文字母、漢字、數字、底線組成的長度 3-12 個位元組以 內');                c_user = ''; }else if(username.length < 3){ p.p('#user_prompt','p2','p1 p3','使用者名稱長度錯誤！'); c_user = ''; }else if(!validate.username(username)){ p.p('#user_prompt','p2','p1 p3','此使用者名稱不合法。'); c_user = ''; }else{ //判斷使用者名稱是否存在 ajax 基於jQuery $.get("chk_username.php",{username:$('#username').val() },function(data,textStatus){ if(data.indexOf('true') != -1){ p.p('#user_prompt','p3','p1 p2','恭喜您，您可以使用這個使用者名稱註冊！'); c_user = 'yes'; }else{ p.p('#user_prompt','p2','p1 p3','該使用者名稱已經被註冊，請選用其他使用者名稱。'); c_user = ''; } }) } chkreg();//每一次滑鼠離開都驗證一下。 function chkreg(){ if(c_user == 'yes' && c_pwd1 == 'yes' && c_pwd2 == 'yes' && c_email == 'yes' && c_checkcode == 'yes'){ flag = true; }else{ flag = false;} }

ajax方法

代碼如下

複製代碼

<form action="/loupan/newask.php" method="post" id="submitform"  name="submitform" ><tr>       <td><table width="100%" border="0" cellspacing="0" cellpadding="0">         <tr>           <td width="6%">手機：</td>           <td width="21%"><input name="mo" type="text" class="inp" id="mo" size="17" /></td>           <td width="8%" align="right">郵箱：</td>           <td width="21%"><input name="email" type="text" class="inp" id="email" size="17" /></td>           <td width="44%"><span class="gray">留下您的手機號碼，有最新訊息我們會發送到您手機 </span></td>         </tr>       </table></td>       </tr>     <tr>       <td height="90" align="left">         <textarea name="bak" cols="80" rows="5" class="lab" id="bak1"></textarea></td>       </tr>     <tr>       <td><input name="button" type="button" class="but" id="buttonajax" value="提交留言" />         <span class="gray">        提出疑問，將有專業的置業顧問或房樂網網友幫您解答 </span></td>       </tr>       <input name="lid" type="hidden" value="5976908" />           <input name="cityid" type="hidden" value="1208" />           <input name="cityareaid" type="hidden" value="1209" />           <input name="fanginfo" type="hidden" value="宇洋西海廣場" />       </form> $('#buttonajax').click(function(){  //alert($(this).val());  //checkem();  var postData = $('#submitform').serialize();  //alert(postData);  $.ajax({   type: "POST",   url: "/xxxx.php",   data: postData,   success: function(msg){    //alert(msg);    if(msg==1){     alert('您的問題已提交成功！');     $('#bak1').val('');     $('#mo').val('');        }else if(msg==-1){     alert('您的問題提交失敗，請認真填寫提交內容！');        }else if(msg==-2){     alert('請輸入正確手機號碼！');    }    else if(msg==-3){     alert('對不起，你提交的內容中有非法字元！');    }    else if( msg== -4 )    {     alert('對不起，您己提交此問題,請不要重複提交！');    }    else    {     alert('對不起，系統忙請稍後再試！');    }   }  }); })