js验证弹出窗口登陆

记录下弹出窗口验证不灵的方法:
页面:
<script type="text/javascript">
     function reflashCheckCode() {
      $("#imgVerifyCode").attr("src", "{:U('Public/verify?dt=')}"+getdatetime());
      return false;
    }
</script>
<script type="text/javascript" src="{$site_url}/Public/js/jquery.login.js"></script>
<script type="text/javascript">
$().ready(function(){
       $("#btnQlCancel").click(function() {
               ui.box.close();
       });
        $("body").keydown(function(event) {
            if (event.keyCode == 13) {
                qlValidator.doQuiteLogin();
            }
        });
       
       $("#btnQlSubmit").click(function() {
                qlValidator.doQuiteLogin();
       });    
       
       $("#txtName").blur(function(){
              $.checkName($("#txtName").val(),'nameTip');
            return;
       });
       
       $("#txtPassword").blur(function(){
            $.checkPasword($("#txtPassword").val(),'passwordTip');
            return;
       });
       
       $("#txtVerify").blur(function(){
           $.checkVerify($("#txtVerify").val(),'verifyTip');
           return;
       });
       
       var qlValidator = {
            doinit: function() {
                var flag = false;
                flag=$.checkName($("#txtName").val(),'nameTip');
                flag=$.checkPasword($("#txtPassword").val(),'passwordTip');
                flag=$.checkVerify($("#txtVerify").val(),'verifyTip');
                return flag;
            },
            doQuiteLogin: function() {
                  
                  if(qlValidator.doinit()){
                        var form = $('#qlForm');
                        //ui.load();
                        var ajax = {
                            url: "{:U('Public/checkLogin')}", data: form.serialize(), type: 'POST', dataType: 'json', cache: false,
                            success: function(data, statusText) {
                            //    ui.loaded();
                                if (data.state == 1) {
                                    $("#activeMsg").show();
                                    ui.error(data.reason);    //没有激活                                
                                }
                                else if (data.state == 2) {
                                   ui.error(data.reason);    //账号无效    
                                }
                                else if(data.state == 3) {
                                   ui.box.close();
                                   ui.success(data.reason); //success
                                   setTimeout( function(){  
                                         location.href=U('User/index');
                                    } , 1500);
                                   
                                }
                                else if(data.state==4){
                                   ui.error(data.reason);    //账号无效    
                                }
                            },
                            error: function(httpRequest, statusText, errorThrown) {
                                ui.loaded();
                                ui.error('数据请求时发生错误,请检查' + errorThrown );
                            }
                        };
                        $.ajax(ajax);                        
                        return false;
                   }                        
            }    
        };
       
       
});
</script>

<style>
.re-form-label{
 color: #666666;
 width:60px;	
 float:left;
 padding-top: 3px;
}
.collection {
    display: inline-block;
	text-align: left;
	float: left;
}
.re-form-txt {
    border: 1px solid #C8C8C8;
    height: 24px;
    line-height: 24px;
    margin-right: 3px;
    padding-left: 3px;
    width: 154px;
	float:left;
}
.re-form-verify {
    border: 1px solid #C8C8C8;
    height: 24px;
    line-height: 24px;
    margin-right: 3px;
    padding-left: 3px;
    width: 50px;
	float:left;	
}
.collection .reg-msg{display:inline-block;color:#999999; white-space:nowrap; padding-top:10px;float:left; text-align:right;}
.collection .right{ background:url({$site_url}/Public/images/right.gif) no-repeat 0% 50%; padding-left:24px;height:14px; }
.collection .errors{ background:url({$site_url}/Public/images/wrong.gif) no-repeat 0% 50%; padding-left:24px; color:#FF6633;height:14px; }
.input-red{border:1px solid #FF6633; }
</style>

<div style="margin-left:50px;"> 
  <form id="qlForm" >
    <div style="width: 350px; height:28px; margin: 15px auto; clear:both;">
        <label class="re-form-label">用户名:</label>
        <div class="collection">
            <input id="txtName" type="text" class="re-form-txt" name="txtName" >
            <span class="reg-msg" id="nameTip"></span>
        </div>
    </div>
    <div style="width: 350px; height:28px; margin: 8px auto; clear:both;">
        <label class="re-form-label">密码:</label>
        <div class="collection">
            <input id="txtPassword" type="password" class="re-form-txt" name="txtPassword" >
            <span class="reg-msg" id="passwordTip"></span>
        </div>
    </div>
    <div style="width: 350px; height:28px; margin: 8px auto; clear:both;">
        <label class="re-form-label">验证码:</label>
        <div class="collection">
            <input id="txtVerify" class="re-form-verify" type="text"  name="txtVerify" >
            <a href="#" οnclick="reflashCheckCode();return false;"><img src="{:U('Public/verify')}" id="imgVerifyCode" border="0" style="float:left;padding-right:3px;"/></a>
            <span class="reg-msg" id="verifyTip"></span>
        </div>
    </div>
    <div style="width:200px; height:35px; padding-left: 35px;">
        <input type="button"  id="btnQlSubmit" name="btnQlSubmit" value="确定" /><input type="button" id="btnQlCancel" name="btnQlCancel" value="取消" /> 
        马上注册
    </div>
 
  
  <div id="activeMsg" style="display:none; background:#FFC; padding: 10px; width: 300px; height: 50px; line-height:25px; text-align:left;">
  该帐户还未激活,请通过邮件激活。<br />
  如果未收到激活邮件,可以<a href="{:U('Public/reSendActiveMail')}">重发激活邮件</a>。
  </div>
   </form>
</div> 


jquery.login.js
;(function($){
  
  $.extend({
	 "checkName":function(value,tip){
		   if(value.replace(/(^\s*)|(\s*$)/g, "")==""){
			   $("#"+tip).addClass('errors').fadeIn();
			   return false;
		   }else if(!/^[\a-z0-9\_]{4,16}$/.test(value)){
			   $("#"+tip).addClass('errors').fadeIn();
			   return false;
		   }else{
			   var f=false;	
			   $.ajax({
					  type:"POST",
						async:false,
						url:U('Public/rightName'),
						data:"username="+value,
						success:function(data){
							 if(data=="1"){
									$("#"+tip).addClass('errors').fadeIn().html('不存在');
			                        f= false;
							 }else if(data=="2"){
									$("#"+tip).removeClass('errors').addClass('right').fadeIn().html('');
			                        f= true;
							 }
						}
					  });
			    
			    return f;
			}
	  },
	 "checkPasword":function(value,tip){
	       if(value.replace(/(^\s*)|(\s*$)/g, "")==""){
			   $("#"+tip).addClass('errors').fadeIn();
			   return false;
		   }else if(!/^[\w\S]{6,16}$/.test(value)){
			   $("#"+tip).addClass('errors').fadeIn();
			   return false;
		   }else{
			   $("#"+tip).removeClass('errors').addClass('right').fadeIn();
			   return true;
		    }
	  },
	 "checkVerify":function(value,tip){
	       if(value.replace(/(^\s*)|(\s*$)/g, "")==""){
			   $("#"+tip).addClass('errors').fadeIn();
			   return false;
		   }else{
			   var f=false;
			   $.ajax({
				  type:"POST",
				  async:false,
				  url:U('Public/checkVerify'),
				  data:"verify="+$("#txtVerify").val(),
				  success:function(data){
					   if(data=="ok"){
						   $("#"+tip).removeClass('errors').addClass('right').fadeIn();
			               f= true;
					   }else if(data=="1"){
						   $("#"+tip).removeClass('right').addClass('errors').fadeIn();
			               f= false;	 
					   }
				  }
			    });		
			    return f;
			  
		    }
	  }
	 
  });
  
})(jQuery);

感觉有点繁琐,可是对jquery插件写法不是很会,路过的难友们,高手们,有木有更好的方法,贴出来学习学习 谢谢。


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值