Maison > Article > interface Web > Exemple de partage d'un didacticiel de base sur la vérification de connexion JavaScript

Exemple de partage d'un didacticiel de base sur la vérification de connexion JavaScript

小云云original: 2017-12-28 11:31:582153parcourir

Cet article présente principalement en détail le didacticiel de base de la vérification de connexion JavaScript. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère qu'il pourra aider tout le monde.

L'exemple de cet article partage le code spécifique de vérification de connexion js pour votre référence. Le contenu spécifique est le suivant

1. Trois utilisations de3f1c4e4b6b16bbbd69b2ee476dc4f83aac6552b0fe9fea17e3644c4165a0c76f

2. Placer dans 93f0f5c25f18dab9d176bd4f6de5d30e > 3. Placez-le dans un fichier JS externe

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

<!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>

Exécuter la capture d'écran :

Trois façons de générer des données :

1. Utilisez la méthode document.write() pour écrire le contenu dans le document HTML.

2. Utilisez window.alert() pour faire apparaître une boîte d'avertissement. 3. Utilisez innerHTML pour écrire dans des éléments HTML.

1). Utilisez l'attribut "id" pour identifier les éléments HTML.

2). Utilisez la méthode document.getElementById(id) pour accéder aux éléments HTML.

3). Utilisez innerHTML pour obtenir ou insérer le contenu de l'élément.

Le code est le suivant

Exécuter la capture d'écran :

<!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>

3. Préparation de la page de connexion :

1. Ajoutez une boîte d'invite d'erreur.

2. Écrivez le fichier HTML+CSS. 3. Définissez l'identifiant de chaque élément d'entrée

4. Définissez la fonction JavaScript.

1. Vérifiez 6 à 20 chiffres du nom d'utilisateur

2. Vérifiez 6 à 20 chiffres du mot de passe

5. Appelez cette fonction en cliquant.

Le code html est le suivant :

Le code du fichier js est le suivant :

<!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>

Le code CSS est le suivant :

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位字符"
 }
}

Exécuter la capture d'écran :

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

Recommandations associées :

Exemple de code de vérification de connexion à l'aide d'un cookie php

Explication détaillée de la vérification de connexion simple en Python

Connexion JavaScript Implémentation du code de vérification

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en 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：Explication détaillée de la bibliothèque globale d'outils de commutation multilingue React-Native React-Native-i18nArticle suivant：Explication détaillée de la bibliothèque globale d'outils de commutation multilingue React-Native React-Native-i18n

Articles Liés

Voir plus