jQuery實(shí)現(xiàn)簡單登錄條件判斷
本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)簡單登錄條件判斷的具體代碼,供大家參考,具體內(nèi)容如下
一、效果展示
二、思路分析
1、在輸入框都不為空且勾選協(xié)議的情況下改變登錄按鈕的狀態(tài)。
2、需要在輸入框輸入和修改勾選按鈕是進(jìn)行判斷
3、可以封裝一個(gè)函數(shù)進(jìn)行相應(yīng)的調(diào)用
三、jQuery語句
封裝的函數(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è)成功!!!!"); ? ? ? ? } ? ? });
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jQuery+Ajax用戶登錄功能的實(shí)現(xiàn)
- jquery 彈出登錄窗口實(shí)現(xiàn)代碼
- PHP+jQuery+Ajax實(shí)現(xiàn)用戶登錄與退出
- jquery ajax 登錄驗(yàn)證實(shí)現(xiàn)代碼
- 基于jquery ajax 用戶無刷新登錄方法詳解
- 基于Jquery+div+css實(shí)現(xiàn)彈出登錄窗口(代碼超簡單)
- JQuery記住用戶名密碼實(shí)現(xiàn)下次自動(dòng)登錄功能
- 使用Jquery打造最佳用戶體驗(yàn)的登錄頁面的實(shí)現(xiàn)代碼
- javascript和jquery實(shí)現(xiàn)用戶登錄驗(yàn)證
- jQuery實(shí)現(xiàn)彈出窗口中切換登錄與注冊(cè)表單
相關(guān)文章
jQuery實(shí)現(xiàn)可拖動(dòng)的浮動(dòng)層完整代碼
使用jQuery實(shí)現(xiàn)可拖動(dòng)的浮動(dòng)層的完整代碼,復(fù)制保存到html文件就可以體驗(yàn)效果.光標(biāo)移動(dòng)到層上,按住鼠標(biāo)就可以拖動(dòng)層2013-05-05toggle一個(gè)div顯示或隱藏且可擴(kuò)展成自定義下拉框
本文為大家介紹下如何讓一個(gè)div顯示或隱藏且可擴(kuò)展成自定義下拉框,具體實(shí)現(xiàn)如下,感興趣的朋友可參考下,希望對(duì)大家有所幫助2013-09-09jQuery滾動(dòng)加載圖片實(shí)現(xiàn)原理
這篇文章主要介紹了jQuery滾動(dòng)加載圖片實(shí)現(xiàn)原理,通過四個(gè)方面來說明懶加載技術(shù)的原理,感興趣的小伙伴們可以參考一下2015-12-12jquery中交替點(diǎn)擊事件的實(shí)現(xiàn)代碼
這篇文章主要介紹了jquery中交替點(diǎn)擊事件的實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-02-02關(guān)于jQuery新的事件綁定機(jī)制on()的使用技巧
本篇文章介紹了,關(guān)于jQuery新的事件綁定機(jī)制on()的使用技巧。需要的朋友參考下2013-04-04基于jquery實(shí)現(xiàn)的移入頁面上空文本框時(shí),讓它變?yōu)榻裹c(diǎn),移出清除焦點(diǎn)
基于jquery實(shí)現(xiàn)的移入頁面上空文本框時(shí),讓它變?yōu)榻裹c(diǎn),移出清除焦點(diǎn)的實(shí)現(xiàn)代碼。2011-07-07使用jQuery實(shí)現(xiàn)星級(jí)評(píng)分代碼分享
本文給大家分享的是一段使用jQuery制作的星級(jí)評(píng)分的代碼,非常大氣漂亮,功能也很實(shí)用,這里推薦個(gè)大家。2014-12-12