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 de
1. Placer dans
2. Placer dans
> 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('这是javascript代码')</script> </head> <body> <p id="demo">www</p> <script> document.getElementById('demo').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>     <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 suivantExé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('这是javascript代码')</script> </head> <body> <p id="demo">www</p> <script> document.getElementById('demo').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>     <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: 华文楷体; }
Exemple de code de vérification de connexion à l'aide d'un cookie php
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!