用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字

皇家    -  云代码空间

——

jQuery实现简单登录条件判断

2022-08-16|57阅||

摘要:本文实例为大家分享了jquery实现简单登录条件判断的具体代码,供大家参考,具体内容如下一、效果展示二、思路分析1、在输入框都不为空且勾选协议的情况下改变登录按钮的状态。2、需要在输入框输入和修改勾选

本文实例为大家分享了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("注册成功!!!!");
        }
    });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持云代码。
顶 1踩 0收藏
文章评论
    发表评论

    个人资料

    • 昵称: 皇家
    • 等级: 中级程序员
    • 积分: 245
    • 代码: 0 个
    • 文章: 5 篇
    • 随想: 0 条
    • 访问: 1 次
    • 关注

    人气代码

      最新提问

        站长推荐