萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 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>    
copyright © 萬盛學電腦網 all rights reserved