記錄下快顯視窗驗證不靈的方法:
頁面:
<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外掛程式寫法不是很會,路過的難友們,高手們,有木有更好的方法,貼出來學習學習 謝謝。