判斷登錄界面的賬號(hào)密碼是否為空的時(shí)候又不想用alert顯示就需要用display來(lái)隱藏alert啦(在設(shè)置時(shí)切忌要將隱藏的內(nèi)容寫在賬號(hào)和密碼的div中,否則會(huì)根據(jù)屏幕的分辨率不同而有所變化,這是本人教訓(xùn))
創(chuàng)新互聯(lián)是一家業(yè)務(wù)范圍包括IDC托管業(yè)務(wù),網(wǎng)絡(luò)空間、主機(jī)租用、主機(jī)托管,四川、重慶、廣東電信服務(wù)器租用,西部信息服務(wù)器租用,成都網(wǎng)通服務(wù)器托管,成都服務(wù)器租用,業(yè)務(wù)范圍遍及中國(guó)大陸、港澳臺(tái)以及歐美等多個(gè)國(guó)家及地區(qū)的互聯(lián)網(wǎng)數(shù)據(jù)服務(wù)公司。
首先要定義賬號(hào)、密碼和隱藏部分的id,即var x=document.getElementById("id"),包括按鈕的id,然后點(diǎn)擊登錄按鈕的時(shí)候(btn.onclick=function(){具體的選擇隱藏和顯示的內(nèi)容})要寫函數(shù)進(jìn)行選擇隱藏和顯示;在重置按鈕的是(btn.onclick=function(){清空的內(nèi)容,包括登錄按鈕顯示的內(nèi)容})
具體代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta charset="UTF-8" /> <title>請(qǐng)登錄</title><base target="_blank" /> <style> body{ margin:0px auto; background-image: url(images/dlbj1.png) ; position: relative; } .dl{ width: 380px ; height: 220px ; background-image: url(images/dl.png) ; text-align: center ; margin: auto ; margin-top: 15% ; position: center; } .btn{ font-family : 微軟雅黑 ; font-size: medium ; } #username{ max-width: 200px ; margin: 10px 0px 0px 0px ; height: 28px ; } #us{ color: #FFFFFF ; font-family : 微軟雅黑; } #ps{ color: #FFFFFF ; font-family : 微軟雅黑; } #password{ max-width: 200px ; margin: 20px 0px 10px 0px ; height: 28px ; } </style> </head> <body> <form class="dl" method="post"> <div class="dlsy"> <br/><br/><br/> <div class="username"> 賬號(hào):<input type="text" id="username"/><span id="u" >*請(qǐng)輸入賬號(hào)!</span> </div> <div class="password"> 密碼:<input type="password" id="password"/><span id="p" >*請(qǐng)輸入密碼!</span> </div> <div class="empty"> <span id="up" >*賬號(hào)或密碼錯(cuò)誤</span> </div> <div class="btn"> <button type="button" id="reset" class="btn btn-default button-rounded button-small">重置</button> <button type="button" id="submit" class="btn btn-default button-rounded button-small">登錄</button> </div> </div> </form> <script type="text/javascript"> var x=document.getElementById("username"); var y=document.getElementById("password"); var btnSubmit = document.getElementById("submit"); var btnReset = document.getElementById("reset"); var u=document.getElementById("u"); var p=document.getElementById("p"); var up=document.getElementById("up"); //點(diǎn)擊登錄按鈕時(shí)判斷賬號(hào)、密碼是否為空或錯(cuò)誤 btnSubmit.onclick=function(form){ if(x.value==""){ if(y.value==""){ up.style.display="block"; } else{ u.style.display="block"; up.style.display="none"; } } else if(y.value==""){ if(x.value==""){ up.style.display="block"; } else{ p.style.display="block"; up.style.display="none"; } } else{ u.style.display="none"; up.style.display="block"; p.style.display="none"; } } //點(diǎn)擊重置按鈕時(shí)清空賬號(hào)密碼 btnReset.onclick=function(form){ x.value=""; //清空input里的value y.value=""; u.style.display="none"; up.style.display="none"; p.style.display="none"; } /*btn.onclick=function(form){ /*if (x!="admin"||y!=123456){ alert('賬號(hào)或密碼錯(cuò)誤!'); } //判斷賬號(hào)密碼是否為空則彈出 if (""==x) { alert("請(qǐng)輸入賬號(hào)!"); flag=false; return false; } else if(""==y){ alert("請(qǐng)輸入密碼!"); flag=false; return false; } if(flag==true){ flag=true; }*/ </script> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持創(chuàng)新互聯(lián)!
網(wǎng)站名稱:js判斷登錄界面的賬號(hào)密碼是否為空
當(dāng)前地址:http://bm7419.com/article30/jceeso.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)建站、動(dòng)態(tài)網(wǎng)站、微信小程序、小程序開(kāi)發(fā)、建站公司、網(wǎng)站營(yíng)銷
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)