jQuery實現(xiàn)簡單登錄條件判斷
本文實例為大家分享了jQuery實現(xiàn)簡單登錄條件判斷的具體代碼,供大家參考,具體內(nèi)容如下
一、效果展示
二、思路分析
1、在輸入框都不為空且勾選協(xié)議的情況下改變登錄按鈕的狀態(tài)。
2、需要在輸入框輸入和修改勾選按鈕是進行判斷
3、可以封裝一個函數(shù)進行相應(yīng)的調(diào)用
三、jQuery語句
封裝的函數(shù) (根據(jù)自己的布局結(jié)構(gòu)進行相應(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": '' }); ? ? ? ? ? ? } ? ? ? ? } ? ? }
在輸入框鍵入時和修改勾選狀態(tài)時調(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("注冊成功!!!!"); ? ? ? ? } ? ? });
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于jQuery新的事件綁定機制on()的使用技巧
本篇文章介紹了,關(guān)于jQuery新的事件綁定機制on()的使用技巧。需要的朋友參考下2013-04-04基于jquery實現(xiàn)的移入頁面上空文本框時,讓它變?yōu)榻裹c,移出清除焦點
基于jquery實現(xiàn)的移入頁面上空文本框時,讓它變?yōu)榻裹c,移出清除焦點的實現(xiàn)代碼。2011-07-07