首页>>表单>>无刷新表单提交实例,无刷新注册带账号检测(2015-09-19)

无刷新表单提交实例,无刷新注册带账号检测

 本例提交表单时候会验证email账号是否注册，验证合格无刷新提交

本例可以用于表单反馈，登录页面等类似的页面

无刷新表单提交实例,无刷新注册带账号检测
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script type="text/javascript">  
  2. $(document).ready(function() {    
  3.     $('#submit').click(function () {               //为提交按钮关联事件处理代码    
  4.         var name = $('input[name=name]');         //获取所有的表单上的数据  
  5.         var email = $('input[name=email]');  
  6.         var website = $('input[name=website]');  
  7.         var comment = $('textarea[name=comment]');  
  8.         var emailInfo = $("#emailInfo");  
  9.         var nameInfo= $("#nameInfo");  
  10.         if (name.val()=='') {             //简单的验证以确保输入了数据，否则应用CSS高亮显示  
  11.             name.addClass('hightlight');  
  12.             return false;  
  13.         }   
  14.         else {  
  15.             name.removeClass('hightlight');  
  16.             nameInfo.text("√");  
  17.         }  
  18.         //  
  19. //validation functions  
  20.     function validateEmail(){  
  21.         //testing regular expression  
  22.         var a = email.val();  
  23.           
  24.         var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;  
  25.           
  26.         //if it's valid email  
  27.         if(filter.test(a)){  
  28.   
  29.             $.ajax(  
  30.             {  
  31.                 type: 'get', 
  32.                 async:false, 
  33.                 cache:false, 
  34.                 url : "user_ck.php?email_address="+a+"&time="+(new Date()).getTime(), 
  35.                 success :function (data,textStatus) 
  36.                 { 
  37.                     if(textStatus=='success') 
  38.                     { 
  39.                         if(data=='0') 
  40.                         {    
  41.                             email.addClass('hightlight'); 
  42.                             emailInfo.text("email已经存在");     
  43.                             returnTag = false; 
  44.                         } 
  45.                         else 
  46.                         { 
  47.                             email.removeClass('hightlight'); 
  48.                             emailInfo.text("√"); 
  49.                             returnTag = true; 
  50.                         } 
  51.                          
  52.                     } 
  53.                      
  54.                 } 
  55.             }) 
  56.             return returnTag; 
  57.             //这里要是ture 
  58.  
  59.         } 
  60.         //if it's NOT valid  
  61.         else{  
  62.               
  63.             email.addClass('hightlight');  
  64.             return false;  
  65.         }  
  66.     }  
  67.         if (!validateEmail()){  
  68.             return false;  
  69.         }  
  70.         else email.removeClass('hightlight');  
  71.           
  72.           
  73.         if (comment.val()=='') {         //简单的验证以确保输入了数据，否则应用CSS高亮显示  
  74.             comment.addClass('hightlight');  
  75.             return false;  
  76.         } else comment.removeClass('hightlight');         
  77.         //组织HTML查询字符串属性，以便于提交  
  78.         var data = 'name=' + name.val() + '&email=' + email.val() + '&website=' +   
  79.         website.val() + '&comment='  + encodeURIComponent(comment.val());  
  80.         $('.text').attr('disabled','true'); //禁止所有的表单输入       
  81.         $('.loading').show();               //显示加载进度  
  82.         $.ajax({                            //开始AJAX提交  
  83.             url: "ok.php",              //指定服务器端文件  
  84.             type: "GET",                    //使用GET请求方式  
  85.             data: data,                     //传送数据  
  86.             cache: false,                  //不缓存此页  
  87.             success: function (html) {      //成功提交事件处理代码          
  88.             if (html==1) {                  //PHP页面返回1，表示成功   
  89.                 $('.form').fadeOut('slow'); //隐藏表单                                
  90.                 $('.done').fadeIn('slow');  //显示完成窗口  
  91.                 } else alert('对不起，出现了未预料的异常，请重试.');               
  92.             }         
  93.         });       
  94.         //取消提交按钮的默认行为  
  95.         return false;  
  96.     });   
  97. });   
  98. </script>  
XML/HTML Code
  1. <form method="post" action="#">  
  2.     <div class="element">  
  3.         <label>姓名</label>  
  4.         <input type="text" name="name" class="text" />  
  5.         <span id="nameInfo"></span>  
  6.     </div>  
  7.     <div class="element">  
  8.         <label>Email</label>  
  9.         <input type="text" name="email" class="text" />  
  10.         <span id="emailInfo"></span>  
  11.     </div>  
  12.     <div class="element">  
  13.         <label>内容</label>  
  14.         <textarea name="comment" class="text textarea" /></textarea>  
  15.     </div>  
  16.     <div class="element">  
  17.         <!--提交按钮-->  
  18.         <input type="submit" id="submit"/>  
  19.         <!--加载提示-->  
  20.         <div class="loading"></div>  
  21.     </div>  
  22.     </form>  

 


原文地址:http://www.freejs.net/article_biaodan_506.html