js验证弹出窗口登陆
记录下弹出窗口验证不灵的方法：
页面：
感觉有点繁琐，可是对jquery插件写法不是很会，路过的难友们，高手们，有木有更好的方法，贴出来学习学习 谢谢。
页面：
<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(!/^[wS]{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插件写法不是很会，路过的难友们，高手们，有木有更好的方法，贴出来学习学习 谢谢。
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
