千家信息网

jQuery如何实现简单登录条件判断

发表于:2025-11-20 作者:千家信息网编辑
千家信息网最后更新 2025年11月20日,小编给大家分享一下jQuery如何实现简单登录条件判断,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体内容如下一、效果展
千家信息网最后更新 2025年11月20日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("注册成功!!!!");        }    });

以上是"jQuery如何实现简单登录条件判断"这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!

0