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("注册成功!!!!");
        }
    });