夏日博客

A-A+

基于jquery用户名实时验证是否己注册实现程序

2016年01月21日 前端设计 暂无评论 阅读 5 views 次

用户输入一个表单,输入准考证和验证码,验证用户是否输入表单,点击查询提交,然后从服务器得到返回的数据并显示出来,代码如下:

  1. <script language="javascript" type="text/javascript">  
  2.    
  3.     $(document).ready(function() {  
  4.    
  5.         $("#btnSubmit").click(function() {  
  6.    
  7.             Login();  
  8.    
  9.         });  
  10.    
  11.     });  
  12.    
  13.     function Login() {  
  14.    
  15.         if (Check()) {  
  16.    
  17.             LoginSuccess();  
  18.    
  19.         }  
  20.    
  21.     }  
  22.    
  23.     function Check() {  
  24.    
  25.         if ($("#ksbh").val() == "") {  
  26.    
  27.             alert("准考证号不能为空！");  
  28.    
  29.             $("#ksbh").focus();  
  30.    
  31.             return false;  
  32.    
  33.         }  
  34.    
  35.         if ($("#Yzm").val() != $.cookie('ValidateCode')) {  
  36.    
  37.             alert("验证码错误！")  
  38.    
  39.             $("#Yzm").focus();  
  40.    
  41.             return false;  
  42.    
  43.         }  
  44.    
  45.         return true;  
  46.    
  47.     }  
  48.    
  49.     function LoginSuccess() {  
  50.    
  51.         $.ajax({  
  52.    
  53.             type: "POST",  
  54.    
  55.             url: "/zk/zkcj201204a",  
  56.    
  57.             data: { ksbh: $("#ksbh").val()},  
  58.    
  59.             beforeSend: function() { $("#msg").html("loading......正在提交请稍候。"); },  
  60.    
  61.             success: function(data) {  
  62.    
  63.                 $("#msg").html(data).show();  
  64.    
  65.                 document.getElementById("valiCode").src = document.getElementById("valiCode").src+'?';  
  66.    
  67.             }  
  68.    
  69.         });  
  70.    
  71.     }  
  72.    
  73. </script>  

html代码如下:

  1. <div id="lmain">  
  2.    
  3.     <div><span class="s1">准考证号：</span><span class="s2"><input id="ksbh" maxlength="12" name="ksbh" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/g,''))" onkeyup="value=value.replace(/[^d]/g,'')" type="text" value="" /></span></div>  
  4.    
  5.     <div><span class="s1">验证码：</span><span class="s3"><input id="Yzm" name="Yzm" type="text" value="" /><img id="valiCode" style="cursor: pointer;height:22px; line-height:22px; vertical-align:middle;" src="../Validate/GetValidateCode" onclick="this.src=this.src+'?'" alt="看不清？点击更换" /></span></div>  
  6.    
  7.     <div style=" text-align:center;"><input type="button" id="btnSubmit" value="查询" /> </div>    
  8.    
  9. </div>  
  10.    
  11. <div id="msg" style=" width:600px;text-align:center; margin-top:20px;"></div>  
标签：

给我留言