이 글에서는 로그인 인터페이스의 계정 비밀번호가 비어 있는지 확인하기 위해 없음 및 표시 차단을 사용하는 방법을 주로 소개합니다. 매우 좋은 참고값이 있습니다.
로그인 인터페이스의 계정과 비밀번호가 비어 있는지 확인하고 싶을 때 사용하세요. 알림 표시, 알림을 숨기려면 표시를 사용해야 합니다. (설정 시) 계좌 번호와 비밀번호의 p에 숨겨진 내용을 쓰지 마십시오. 그렇지 않으면 화면 해상도에 따라 변경됩니다)
먼저 계정번호, 비밀번호, 숨겨진 부분의 id, 즉 버튼의 id를 포함한 var x=document.getElementById("id")를 정의한 후, 로그인 버튼( btn.onclick=function(){콘텐츠를 숨기고 표시하는 특정 선택}), 재설정 버튼은 (btn.onclick=function(){콘텐츠를 포함하여 삭제된 콘텐츠입니다. 로그인 버튼으로 표시})
구체적인 코드는 다음과 같습니다:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta charset="UTF-8" /> <title>请登录</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"> <p class="dlsy"> <br/><br/><br/> <p class="username"> 账号:<input type="text" id="username"/><span id="u" style="display: none;color: red;font-size:13px;">*请输入账号!</span> </p> <p class="password"> 密码:<input type="password" id="password"/><span id="p" style="display: none;color: red;font-size:13px;">*请输入密码!</span> </p> <p class="empty"> <span id="up" style="display: none;color: red;font-size:13px;">*账号或密码错误</span> </p> <p 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> </p> </p> </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"); //点击登录按钮时判断账号、密码是否为空或错误 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"; } } //点击重置按钮时清空账号密码 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('账号或密码错误!'); } //判断账号密码是否为空则弹出 if (""==x) { alert("请输入账号!"); flag=false; return false; } else if(""==y){ alert("请输入密码!"); flag=false; return false; } if(flag==true){ flag=true; }*/ </script> </body> </html>
로그인 인터페이스의 계정과 비밀번호가 유효한지 확인하는 추가 js 비어 있습니다. 관련 기사는 PHP 중국어 웹사이트를 참고하세요!