jQuery实现简单登录条件判断
时间：2022-11-16 09:15:07 | 栏目：jquery | 点击：次
本文实例为大家分享了jQuery实现简单登录条件判断的具体代码，供大家参考，具体内容如下
一、效果展示
二、思路分析
1、在输入框都不为空且勾选协议的情况下改变登录按钮的状态。
2、需要在输入框输入和修改勾选按钮是进行判断
3、可以封装一个函数进行相应的调用
三、jQuery语句
封装的函数 (根据自己的布局结构进行相应的代码修改)
function Code() {
if (inx == 0) {
if ($(".login-main .focus").eq(0).val() != '' && $(".login-main .focus").eq(1).val() != '' && $(".login-main .checkbox").prop("checked")) {
$(".login").css({ "background": '#ff6900', "cursor": 'pointer' });
return true;
} else {
$(".login").css({ "background": '#ffbe99', "cursor": '' });
}
} else {
if ($(".register-main .focus").eq(0).val() != '' && $(".register-main .focus").eq(1).val() != '' && $(".register-main .checkbox").prop("checked")) {
$(".register").css({ "background": '#ff6900', "cursor": 'pointer' });
return true;
} else {
$(".register").css({ "background": '#ffbe99', "cursor": '' });
}
}
}
在输入框键入时和修改勾选状态时调用。
// 3. 输入框效果
$(".focus").on({
focus: function() {
$(this).addClass("change")
.siblings(".meg").stop().animate({
top: 8,
fontSize: 12
}, 200);
},
blur: function() {
if ($(this).val() != "") {
$(this).removeClass("change")
.siblings(".erron").stop().fadeOut(200);
} else {
$(this)
.removeClass("change")
.addClass("blur")
.siblings(".meg").removeClass("color")
.addClass("becolor").stop().animate({
top: 20,
fontSize: 16,
}, 200)
.siblings(".erron").stop().fadeIn(200);
}
},
keydown: function() {
$(this).removeClass("blur")
.siblings(".meg").removeClass("becolor")
.addClass("color")
.siblings(".erron").stop().fadeOut(200);
Code();
}
});
// 6.判断登录条件
$(".checkbox").change(function() {
Code();
});
$(".login").on("click", function() {
if (Code()) {
alert("登录成功!!!!");
}
});
$(".register").on("click", function() {
if (Code()) {
alert("注册成功!!!!");
}
});