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如何實現簡單登錄條件判斷”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！