Heim > Artikel > Web-Frontend > js ermittelt, ob das Kontokennwort auf der Anmeldeschnittstelle leer ist
js ermittelt, ob das Kontokennwort auf der Anmeldeschnittstelle leer ist
- 高洛峰Original
- 2017-02-11 17:23:502913Durchsuche
In diesem Artikel wird hauptsächlich die Methode zur Verwendung von „Keine“ und „Blockieren“ vorgestellt, um festzustellen, ob das Kontokennwort der Anmeldeschnittstelle leer ist. Es hat einen sehr guten Referenzwert. Schauen wir es uns mit dem Editor unten an.
Wenn Sie feststellen möchten, ob das Konto und das Passwort auf der Anmeldeoberfläche leer sind und Sie das nicht verwenden möchten Benachrichtigungsanzeige, Sie müssen die Anzeige verwenden, um die Benachrichtigung auszublenden (beim Einrichten). Schreiben Sie den ausgeblendeten Inhalt nicht in das p der Kontonummer und des Passworts, da er sich sonst je nach Bildschirmauflösung ändert. Dies ist meine Lektion.
Definieren Sie zuerst die Kontonummer, das Passwort und die ID des versteckten Teils, also var x=document.getElementById("id"), einschließlich der ID der Schaltfläche, und klicken Sie dann auf die Anmeldeschaltfläche ( btn.onclick=function(){spezifische Auswahl zum Ausblenden und Anzeigen von Inhalten}), Sie müssen eine Funktion zum Auswählen und Ausblenden und Anzeigen der Schaltfläche zum Zurücksetzen schreiben (btn.onclick=function(){Inhalt gelöscht, einschließlich des Inhalts). wird durch die Anmeldeschaltfläche angezeigt})
Der spezifische Code lautet wie folgt:
<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>Mehr Js, um festzustellen, ob das Konto und das Passwort bei der Anmeldung vorhanden sind Für verwandte Artikel beachten Sie bitte die PHP-Chinese-Website!