js验证弹出窗口登陆

来源：互联网发布：淘宝服装设计师介绍编辑：程序博客网时间：2024/05/24 05:04

记录下弹出窗口验证不灵的方法：
页面：

<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="#" onclick="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插件写法不是很会，路过的难友们，高手们，有木有更好的方法，贴出来学习学习谢谢。