js驗證快顯視窗登陸

來源:互聯網
上載者:User

記錄下快顯視窗驗證不靈的方法:
頁面:

<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外掛程式寫法不是很會,路過的難友們,高手們,有木有更好的方法,貼出來學習學習 謝謝。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.