js judges whether the account password in the login interface is empty

2021-07-18 06:38:40
OfStack

When judging whether the account password of the login interface is empty and not wanting to display it with alert, you need to hide alert with display (avoid writing the hidden content in the div of the account and password when setting, otherwise it will change according to the resolution of the screen, which is my lesson)

First, we should define id of account number, password and hidden part, that is, var x = document. getElementById ("id"), including id of button, and then write a function to select hidden and displayed when clicking the login button (btn.onclick=function () {specific selection of hidden and displayed content}); At the reset button is (btn. onclick = function () {empty content, including what the login button displays})

The specific code is as follows:


<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="UTF-8" />
<title> Please log in </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 :  Microsoft Yahei  ;
 font-size: medium ;
 }
 #username{
 max-width: 200px ;
 margin: 10px 0px 0px 0px ;
 height: 28px ;
 }
 #us{
 color: #FFFFFF ;
 font-family :  Microsoft Yahei ;
 }
 #ps{
 color: #FFFFFF ;
 font-family :  Microsoft Yahei ;
 }
 #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">
  Account number: <input type="text" id="username"/><span id="u" style="display: none;color: red;font-size:13px;">* Please enter the account number! </span>
 </div>
 <div class="password">
  Password: <input type="password" id="password"/><span id="p" style="display: none;color: red;font-size:13px;">* Please enter the password! </span>
 </div>
 <div class="empty">
 <span id="up" style="display: none;color: red;font-size:13px;">* Wrong account number or password </span>
 </div>
 <div class="btn">
 <button type="button" id="reset" class="btn btn-default button-rounded button-small"> Reset </button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <button type="button" id="submit" class="btn btn-default button-rounded button-small"> Login </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");
 // When clicking the login button, judge whether the account number and password are empty or wrong 
 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";
 }
 }
 // Clear the account password when clicking the reset button 
 btnReset.onclick=function(form){
  x.value=""; // Empty input In 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(' Wrong account number or password !');
 }
 // If the account password is empty, it will pop up 
 if (""==x) {
 alert(" Please enter the account number! ");
 flag=false;
 return false; 
 }
 else if(""==y){
 alert(" Please enter the password! ");
 flag=false;
 return false;
 }
 if(flag==true){
 flag=true;
 }*/
</script>
</body>
</html>