返回顶部
首页 > 资讯 > 前端开发 > JavaScript >jQuery实现简单登录条件判断
  • 306
分享到

jQuery实现简单登录条件判断

2024-04-02 19:04:59 306人浏览 安东尼
摘要

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: jQuery实现简单登录条件判断

本文链接: https://lsjlt.com/news/143878.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • jQuery实现简单登录条件判断
    本文实例为大家分享了jQuery实现简单登录条件判断的具体代码,供大家参考,具体内容如下 一、效果展示 二、思路分析 1、在输入框都不为空且勾选协议的情况下改变登录按钮的状态。2、...
    99+
    2024-04-02
  • jQuery如何实现简单登录条件判断
    小编给大家分享一下jQuery如何实现简单登录条件判断,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体内容如下一、效果展示二、思路分析在输入框都不为空且勾选协议...
    99+
    2023-06-29
  • HTML+jQuery实现简单的登录页面
    目录简介公共代码(后端接口)示例1:最简(纯HTML)代码测试示例2:HTML+jQuery(form data)代码测试示例3:HTML+jQuery(json)代码测试简介 本文...
    99+
    2024-04-02
  • HTML+jQuery如何实现简单的登录页面
    这篇文章主要介绍“HTML+jQuery如何实现简单的登录页面”,在日常操作中,相信很多人在HTML+jQuery如何实现简单的登录页面问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”HTML+jQuery如何...
    99+
    2023-06-25
  • tp6 实现简单登录
    配置路由 //登录页面 Route::get('login','Login/login'); 写html表单页面 Title .main{ width: 500px; ...
    99+
    2023-09-20
    php
  • JavaScript中怎么实现条件判断
    这篇文章将为大家详细讲解有关JavaScript中怎么实现条件判断,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。JavaScript使用if () { .....
    99+
    2024-04-02
  • jquery+Ajax实现简单分页条效果
    本文实例为大家分享了jquery+Ajax实现分页条效果的具体代码,供大家参考,具体内容如下 一、如果是jsp页面的话,可以用EL表达式和JSTL标签制作一个分页条,没有什么难度。用...
    99+
    2024-04-02
  • Python实现简单登录验证
    本文实例为大家分享了简单的Python登录验证,供大家参考,具体内容如下 编写登录接口 要求:1、输入用户名密码    2、认证成功后显示欢迎信息    3、输错三次后锁定 #coding=utf-8 ...
    99+
    2022-06-04
    简单 Python
  • JavaFX登录页面简单实现
    一、准备工作 准备好javaFX开发环境,请详见我上篇文章https://www.sdk.cn/details/wAe9P8mXAq5dbqDl4y 二、项目结构 三、启动类创建Stage public class Main extend...
    99+
    2024-04-02
  • Servlet简单实现登录功能
    本文实例为大家分享了Servlet简单实现登录功能的具体代码,供大家参考,具体内容如下 介绍: Servlet 是 JavaWeb 三大组件之一。三大组件分别是:Servlet 程序...
    99+
    2024-04-02
  • Vue实现简单登录界面
    本文实例为大家分享了Vue实现简单登录界面的具体代码,供大家参考,具体内容如下 实现: 界面实现表单规则校验结合后台 api 校验提示消息 App.vue <template&...
    99+
    2024-04-02
  • Django如何实现简单登录
    这篇文章主要为大家展示了“Django如何实现简单登录”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Django如何实现简单登录”这篇文章吧。创建django项目创建项目的命令行语句: djan...
    99+
    2023-06-25
  • JpaRepository 实现简单条件查询
    目录JpaRepository 简单条件查询创建持久化类定义数据访问层接口定义业务层类定义控制器类测试应用JpaRepository 查询规范1.JpaRepository支持接口规...
    99+
    2024-04-02
  • jQuery插件实现简单动画
    本篇内容主要讲解“jQuery插件实现简单动画”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“jQuery插件实现简单动画”吧!jQuery 提供了一系列的动画方...
    99+
    2024-04-02
  • js如何实现多个条件的判断
    小编给大家分享一下js如何实现多个条件的判断,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!多个条件的判断当我们需要进行多个值的判断时,我们可以使用数组的inclu...
    99+
    2023-06-26
  • springboot扫码登录的简单实现
    目录前言项目简介实现思路实现步骤前言 本文将介绍基于SpringBoot + Vue + Android实现的扫码登录demo的总体思路,完整代码已上传到GitHub。Web端体验地...
    99+
    2024-04-02
  • Android实现简单QQ登录页面
    Android开发实现极为简单的QQ登录页面,供大家参考,具体内容如下 设计一个简单QQ登录页面,无任何功能。然后打包安装到手机。 1.首先创建一个空白页面 2.打开样式设计的页...
    99+
    2024-04-02
  • spring MVC实现简单登录功能
    spring-MVC实现简单的登录功能,供大家参考,具体内容如下 今天我学习了spring-MVC实现简单的登录功能,本篇博客就讲解如何使用spring-MVC实现简单的登录功能 首...
    99+
    2024-04-02
  • springSecurity实现简单的登录功能
    前言 1、不使用数据库,实现一个简单的登录功能,只有在登录后才能访问我们的接口2、springSecurity提供了一种基于内存的验证方法(使用自己定义的用户,不使用默认的) 一、实...
    99+
    2024-04-02
  • vue+tp5实现简单登录功能
    本文实例为大家分享了vue+tp5实现简单登录功能的具体代码,供大家参考,具体内容如下 准备工作:安装vue-cli,element-ui,package.json中如图所示,看着安...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作