suchen

Heim >Web-Frontend >js-Tutorial >Beispiel für ein einfaches Tutorial zur JavaScript-Anmeldeüberprüfung

Beispiel für ein einfaches Tutorial zur JavaScript-Anmeldeüberprüfung

小云云
小云云Original
2017-12-28 11:31:582204Durchsuche

Dieser Artikel stellt hauptsächlich das grundlegende Tutorial zur JavaScript-Anmeldeüberprüfung vor. Ich hoffe, dass es jedem helfen kann.

Das Beispiel in diesem Artikel teilt den spezifischen Code der js-Anmeldeüberprüfung als Referenz. Der spezifische Inhalt ist wie folgt:

Drei Verwendungen von 3f1c4e4b6b16bbbd69b2ee476dc4f83a459f3b9f3b73f6a4e4c9390e62ac33f1 2. Platzieren Sie in 53495576791aca4fd1a7d5b144a1d127 > 3. Platzieren Sie es in einer externen JS-Datei

document.getElementById('demo').innerHTML = Date()


Ausführen des Screenshots: 
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>欢迎你，请先登陆！</title>
 <script type="text/javascript" src="../static/jsp/lx.js"></script>
 <script type="text/javascript">alert(&#39;这是javascript代码&#39;)</script>
</head>
<body>
<p id="demo">www</p>
<script>
 document.getElementById(&#39;demo&#39;).innerHTML = Date()
</script>
<p id="container" style="width: 400px" align="center">
 <p id="header" style="background-color: aquamarine">
  <h2 align="center">登陆</h2>
 </p>
 <p id="content">
  <form>
   <p align="center">账号:
    <input id="uname" type="tex" name="user" placeholder="请输入用户名">
   </p>
   <p align="center">密码:
    <input id="upass" type="password" name="psw">
   </p>
   <p id="error_box"><br></p>
   <br>
   <button onclick="fnLogin()">登陆</button>
   &nbsp&nbsp&nbsp
   <input type="button" name="regist" value="注册">
  </form>
 </p>
 <p style="background-color: aquamarine">
  <i>版权信息@</i>
 </p>
</p>
</body>
</html>

Drei Möglichkeiten, Daten auszugeben:

1. Verwenden Sie die Methode document.write(), um den Inhalt in das HTML-Dokument zu schreiben.

2. Verwenden Sie window.alert(), um ein Warnfeld anzuzeigen.

3. Verwenden Sie innerHTML, um in HTML-Elemente zu schreiben. 1). Verwenden Sie das „id“-Attribut, um HTML-Elemente zu identifizieren.

2). Verwenden Sie die Methode document.getElementById(id), um auf HTML-Elemente zuzugreifen.

3) Verwenden Sie innerHTML, um Elementinhalte abzurufen oder einzufügen.

Der Code lautet wie folgt


Screenshot ausführen:


3. Vorbereitung der Anmeldeseite: 
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>欢迎你，请先登陆！</title>
 <script type="text/javascript" src="../static/jsp/lx.js"></script>
 <script type="text/javascript">alert(&#39;这是javascript代码&#39;)</script>
</head>
<body>
<p id="demo">www</p>
<script>
 document.getElementById(&#39;demo&#39;).innerHTML = Date()
</script>
<button type="button" onclick=window.alert("number")>press</button>
</body>
</html>

1. Fügen Sie ein Fehleraufforderungsfeld hinzu.

2. Schreiben Sie die HTML+CSS-Datei.

3. Legen Sie die ID jedes Eingabeelements fest

4. Definieren Sie die JavaScript-Funktion.

1. Überprüfen Sie 6-20 Ziffern des Benutzernamens

2. Überprüfen Sie 6-20 Ziffern des Passworts

5. Rufen Sie diese Funktion per Klick auf.

Der HTML-Code lautet wie folgt:

Der JS-Dateicode lautet wie folgt:


CSS-Code lautet wie folgt:
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>欢迎你，请先登陆！</title>
 <script type="text/javascript" src="../static/jsp/lx.js"></script>
 <link rel="stylesheet" type="text/css" href="../static/css/lx.css" rel="external nofollow" >
</head>
<body>
<p class="p" id="container">
 <p id="header" >
  <h2 class="h">登陆</h2>
 </p>
 <p id="content">
   <p class="p">账号:
    <input id="uname" type="text" placeholder="请输入用户名">
   </p>
   <p class="p">密码:
    <input id="upass" type="password" >
   </p>
   <p id="error_box"><br>
   </p>
   <button onclick="fnLogin()">登陆</button>
   &nbsp&nbsp&nbsp
   <input type="button" name="regist" value="注册">
 </p>
 <p>
  <i>版权信息@</i>
 </p>
</p>

</body>
</html>


Screenshot ausführen: 
function fnLogin() {
 var oUname = document.getElementById("uname")
 var oUpass = document.getElementById("upass")
 var oError = document.getElementById("error_box")
 if (oUname.value.length > 20 || oUname.value.length < 6) {
  oError.innerHTML = "请输入6-20位字符"
 }

 if (oUpass.value.length > 20 || oUpass.value.length < 6) {
  oError.innerHTML = "请输入6-20位字符"
 }
}


Verwandte Empfehlungen: 

.p {
 border: 5px solid #cccccc;
 width: 400px;
 text-align: center;
}
.p{
 font-family:华文楷体 ;
}
.h{
 font-family: 华文楷体;
}

Beispielcode für die Anmeldeüberprüfung mit PHP-Cookie

Detaillierte Erläuterung der einfachen Anmeldeüberprüfung in Python

JavaScript-Anmeldung Implementierung des Verifizierungscodes

Das obige ist der detaillierte Inhalt vonBeispiel für ein einfaches Tutorial zur JavaScript-Anmeldeüberprüfung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der React-Native-Bibliothek für globale Mehrsprachen-Umschalttools React-Native-i18nNächster Artikel：Detaillierte Erläuterung der React-Native-Bibliothek für globale Mehrsprachen-Umschalttools React-Native-i18n

In Verbindung stehende Artikel

Mehr sehen