本文实例为大家分享了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("注册成功!!!!"); } });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。