recherche

Maison >interface Web >js tutoriel >js détermine si le mot de passe du compte sur l'interface de connexion est vide

js détermine si le mot de passe du compte sur l'interface de connexion est vide

高洛峰
高洛峰original
2017-02-11 17:23:503014parcourir

Cet article présente principalement la méthode d'utilisation d'aucun et de blocage d'affichage pour déterminer si le mot de passe du compte de l'interface de connexion est vide. Il a une très bonne valeur de référence. Jetons-y un coup d'œil avec l'éditeur ci-dessous

Lorsque vous souhaitez déterminer si le compte et le mot de passe sur l'interface de connexion sont vides et que vous ne souhaitez pas utiliser le. affichage de l'alerte, vous devez utiliser display pour masquer l'alerte (lors de la configuration) N'écrivez pas le contenu caché dans le p du numéro de compte et du mot de passe, sinon cela changera en fonction de la résolution de l'écran)

Définissez d'abord le numéro de compte, le mot de passe et l'identifiant de la partie cachée, c'est-à-dire var x=document.getElementById("id"), y compris l'identifiant du bouton, puis lorsque vous cliquez sur le bouton de connexion ( btn.onclick=function(){sélection spécifique pour masquer et afficher le contenu}), vous devez écrire une fonction pour sélectionner, masquer et afficher le bouton de réinitialisation est (btn.onclick=function(){contenu effacé, y compris le contenu ; affiché par le bouton de connexion})

Le code spécifique est le suivant : 


<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(&#39;账号或密码错误!&#39;);
  }
  //判断账号密码是否为空则弹出
  if (""==x) {
  alert("请输入账号！");
  flag=false;
  return false; 
  }
  else if(""==y){
  alert("请输入密码！");
  flag=false;
  return false;
  }
  if(flag==true){
  flag=true;
  }*/
</script>
</body>
</html>
Plus de js pour déterminer si le compte et le mot de passe lors de la connexion L'interface est vide. Pour les articles connexes, veuillez faire attention au site Web PHP chinois !


Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Code d'implémentation de l'opération jQuery type d'entrée = case à cocherArticle suivant：Code d'implémentation de l'opération jQuery type d'entrée = case à cocher

Articles Liés

Voir plus