jQuery實(shí)現(xiàn)簡(jiǎn)單登錄條件判斷

更新時(shí)間：2022年03月25日 10:39:38 作者：小梅正在努力中ing

這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單登錄條件判斷，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)簡(jiǎn)單登錄條件判斷的具體代碼，供大家參考，具體內(nèi)容如下

一、效果展示

二、思路分析

1、在輸入框都不為空且勾選協(xié)議的情況下改變登錄按鈕的狀態(tài)。
2、需要在輸入框輸入和修改勾選按鈕是進(jìn)行判斷
3、可以封裝一個(gè)函數(shù)進(jìn)行相應(yīng)的調(diào)用

三、jQuery語(yǔ)句

封裝的函數(shù) (根據(jù)自己的布局結(jié)構(gòu)進(jìn)行相應(yīng)的代碼修改)

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": '' });
? ? ? ? ? ? }
? ? ? ? }
? ? }

在輸入框鍵入時(shí)和修改勾選狀態(tài)時(shí)調(diào)用。

?// 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("注冊(cè)成功!!!!");
? ? ? ? }
? ? });

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: