jquery無重新整理驗證郵箱地址實現執行個體

jquery無重新整理驗證郵箱地址實現執行個體

 原理非常的簡單在使用者輸入郵箱離開之後我們通用jquery ajax發送資料給mail.php檔案，然後由它實現尋找此郵箱是不是在資料庫中然後反饋對應資訊即可

今天在開發的時候。需要在一個使用者驗證郵箱。但是使用了傳統的js無重新整理需要清空瀏覽器緩衝後才能正常的驗證所以自己就去用jquery 去寫一個了無重新整理驗證 看看

 

 代碼如下:

<script type="text/javascript">

var ee;

function  mailbox(strEmail){

var name=document.blooger[0].email.value;

$.ajax({ 

type: "get", 

url: "<?php echo "http://".$_SERVER['HTTP_HOST']."/Login/"; ?>mail.php", 

data: "youx="+name,

success: function(datax) { 

var xx = document.getElementsByName("email")[0].value;

if (xx == ""){document.getElementById("mailbox_msg").innerHTML='  <font color=red>郵箱不可為空!</font>';}

else if(document.blooger[0].email.value.search(/^w+((-w+)|(.w+))*@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+)*.[A-Za-z0-9]+$/) != -1) {

 

if (datax == 0) { 

document.getElementById("mailbox_msg").innerHTML='  <font color=red>郵箱已經被註冊</font>';

} 

else {document.getElementById("mailbox_msg").innerHTML='  <font color=green>郵箱可以使用!</font>';} 

}else{document.getElementById("mailbox_msg").innerHTML='  <font color=red>郵箱地址不正確</font>';}

}

});

 

}

 

 function check(){

 if(ee != "1"){mailbox();return false;}

 }

</script>

 

 

然後這個是html的代碼

 

 代碼如下:

<form name="blooger" action="blogger.php?action=update" method="post" id="blooger" enctype="multipart/form-data" onsubmit="return check();" >

<div class="item_edit">www.jb51.net

 <li>

 <?php echo $icon; ?><input type="hidden" name="photo" value="<?php echo $photo; ?>"/>

 

 頭像

 

    <input name="photo" type="file" /> (支援JPG、PNG格式圖片)

 </li>

 <li>暱稱

<input maxlength="50" style="width:185px;" value="<?php echo $nickname; ?>" name="name" /> </li>

 <li>電子郵件

<input type="text" name="email" value="<?php echo $email; ?>" id="id_mailbox" style="width:185px;" maxlength="200" onBlur="mailbox(this.value);" /><span id="mailbox_msg"></span></li>

 <li>個人描述

<textarea name="description" style="width:300px; height:65px;" type="text" maxlength="500"><?php echo $description; ?></textarea></li>

 <li><input type="submit" value="儲存資料" class="button" /></li>

</div>

</form>