记录下弹出窗口验证不灵的方法:
页面:
感觉有点繁琐,可是对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="#" ο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插件写法不是很会,路过的难友们,高手们,有木有更好的方法,贴出来学习学习 谢谢。