Maison > interface Web > js tutoriel > le corps du texte

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

高洛峰
Libérer: 2017-02-11 17:23:50
original
2991 Les gens l'ont consulté

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>
Copier après la connexion
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 !


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!