Maison > Article > interface Web > JavaScript implémente l'enregistrement de la connexion Web

JavaScript implémente l'enregistrement de la connexion Web

WBOYoriginal: 2023-05-16 11:14:373207parcourir

Avec le développement d'Internet, de plus en plus de sites Web et d'applications nécessitent que les utilisateurs s'inscrivent et se connectent pour utiliser diverses fonctions. La mise en œuvre de la connexion et de l'enregistrement des sites Web et des applications nécessite généralement l'utilisation d'une technologie back-end, mais la mise en œuvre est lourde et nécessite un long cycle de développement. Dans le même temps, les développeurs front-end peuvent également utiliser la technologie JavaScript pour mettre en œuvre des fonctions de connexion et d'enregistrement, offrant ainsi aux utilisateurs une expérience plus pratique et une vitesse de développement plus rapide.

Cet article expliquera comment utiliser JavaScript pour implémenter les fonctions de base de connexion et d'enregistrement de sites Web et d'applications.

1. Préparation de base du front-end

Avant de commencer à mettre en œuvre les fonctions de connexion et d'enregistrement, vous devez préparer quelques bases techniques de base du front-end :

Langage HTML : le système de base de la page Web, qui détermine le la disposition et le contenu des éléments de la page Web.
Style CSS : prend en charge l'embellissement des pages Web et détermine la couleur, la police, la taille et d'autres styles des éléments de la page Web.
Langage JavaScript : fournit des fonctions interactives dynamiques pour les pages Web et les applications, et implémente des fonctions telles que la connexion, l'enregistrement et la vérification.

2. Implémentation de la connexion au site Web/à l'application

Avant de mettre en œuvre la fonction de connexion, il est nécessaire de déterminer les informations requises pour la connexion de l'utilisateur, y compris le numéro de compte et le mot de passe. Généralement, nous devons utiliser la zone de saisie pour obtenir ces informations, puis vérifier si le numéro de compte et le mot de passe saisis par l'utilisateur sont légaux.

Ce qui suit est le code HTML d'une page de connexion de base :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Login Page</title>
</head>
<body>
    <h1>Login Page</h1>
    <form>
        <label for="username">Username:</label>
        <input type="text" id="username"><br>
        <label for="password">Password:</label>
        <input type="password" id="password"><br>
        <button type="submit" id="loginBtn">Login</button>
    </form>
    <script src="login.js"></script>
</body>
</html>

Dans ce code HTML, nous utilisons la balise ff9c23ada1bcecdd1a0fb5d5a0f18437 pour inclure la zone de saisie utilisateur et le bouton de connexion, 5894f699bff7998df3cb83984c8d0cb6 est utilisée pour décrire l'objectif de la zone de saisie, l'étiquette d5fd7aea971a85678ba271703566ebfd est utilisée pour créer une zone de saisie et le <button&gt ; l'étiquette est utilisée pour créer un bouton de connexion. ff9c23ada1bcecdd1a0fb5d5a0f18437标签来包含用户输入框和登录按钮，2e1cf0710519d5598b1f0f14c36ba674标签用来描述输入框的用途，d5fd7aea971a85678ba271703566ebfd标签用来创建输入框，bb9345e55eb71822850ff156dfde57c8标签用来创建登录按钮。

在这个HTML代码中，我们指定了一个名为“login.js”的JavaScript文件用来实现登录的逻辑。下面是这个JavaScript文件的代码：

function doLogin() {
    // 获取用户输入的账号和密码
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;

    // 进行账号和密码的验证
    if (username === "admin" && password === "123456") {
        alert("Login success!");
    } else {
        alert("Incorrect username or password!");
    }
}

// 监听登录按钮的点击事件
document.getElementById("loginBtn").addEventListener("click", doLogin);

在这段代码中，我们创建了一个名为doLogin()的函数来处理用户登录逻辑。首先我们获取用户输入的账号和密码，然后对这些信息进行验证。在这个例子中，我们使用一个简单的用户名和密码来进行验证。当用户名和密码输入正确时，弹出“Login success!”的提示框，否则弹出“Incorrect username or password!”的提示框。

最后，我们在JavaScript代码中通过addEventListener()函数为登录按钮添加了一个监听事件，当按钮被点击时就会调用doLogin()函数来处理用户的输入。

三、网站/应用程序注册实现

类似于登录功能的实现，我们同样需要先确定用户注册所需要的信息，包括账号、密码和确认密码。在这里，我们需要为“确认密码”这个字段增加一次验证。下面是一个基本的注册页面的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Register Page</title>
</head>
<body>
    <h1>Register Page</h1>
    <form>
        <label for="username">Username:</label>
        <input type="text" id="username"><br>
        <label for="password">Password:</label>
        <input type="password" id="password"><br>
        <label for="confirmPassword">Confirm Password:</label>
        <input type="password" id="confirmPassword"><br>
        <button type="submit" id="registerBtn">Register</button>
    </form>
    <script src="register.js"></script>
</body>
</html>

同样，在这个HTML代码中，我们利用ff9c23ada1bcecdd1a0fb5d5a0f18437标签来包含用户输入框和注册按钮，2e1cf0710519d5598b1f0f14c36ba674标签用来描述输入框的用途，d5fd7aea971a85678ba271703566ebfd标签用来创建输入框，bb9345e55eb71822850ff156dfde57c8标签用来创建注册按钮。

在这个HTML代码中，我们指定了一个名为“register.js”的JavaScript文件用来实现注册逻辑。下面是这个JavaScript文件的代码：

function doRegister() {
    // 获取用户输入的账号、密码和确认密码
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var confirmPassword = document.getElementById("confirmPassword").value;

    // 进行账号和密码的验证
    if (username === "") {
        alert("Username cannot be empty!");
    } else if (password === "" || confirmPassword === "") {
        alert("Password or confirm password cannot be empty!");
    } else if (password !== confirmPassword) {
        alert("Password and confirm password do not match!");
    } else {
        alert("Register success!");
    }
}

// 监听注册按钮的点击事件
document.getElementById("registerBtn").addEventListener("click", doRegister);

在这段代码中，我们创建了一个名为doRegister()的函数来处理用户注册逻辑。同样地，我们获取用户输入的账号、密码和确认密码，并对这些信息进行验证。在这个例子中，我们进行了三个验证：用户名不能为空，密码和确认密码不能为空，密码和确认密码必须一致。当符合这三个条件时，弹出“Register success!”的提示框。

最后，我们在JavaScript代码中通过addEventListener()函数为注册按钮添加了一个监听事件，当按钮被点击时就会调用doRegister()

Dans ce code HTML, nous spécifions un fichier JavaScript nommé "login.js" pour implémenter la logique de connexion. Voici le code de ce fichier JavaScript :

// 登录逻辑
function doLogin() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  // 将数据存储到本地
  window.localStorage.setItem("username", username);
  window.localStorage.setItem("password", password);
  if (username === "admin" && password === "123456") {
    alert("Login success!");
  } else {
    alert("Incorrect username or password!");
  }
}

// 监听登录按钮的点击事件
document.getElementById("loginBtn").addEventListener("click", doLogin);

// 注册逻辑
function doRegister() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  var confirmPassword = document.getElementById("confirmPassword").value;
  if (username === "") {
    alert("Username cannot be empty!");
  } else if (password === "" || confirmPassword === "") {
    alert("Password or confirm password cannot be empty!");
  } else if (password !== confirmPassword) {
    alert("Password and confirm password do not match!");
  } else {
    // 将数据存储到本地
    window.localStorage.setItem("username", username);
    window.localStorage.setItem("password", password);
    alert("Register success!");
  }
}

// 监听注册按钮的点击事件
document.getElementById("registerBtn").addEventListener("click", doRegister);

// 初始化登录页面的数据
function initLoginPage() {
  var username = window.localStorage.getItem("username");
  var password = window.localStorage.getItem("password");
  if (username && password) {
    document.getElementById("username").value = username;
    document.getElementById("password").value = password;
  }
}

// 初始化注册页面的数据
function initRegisterPage() {
  var username = window.localStorage.getItem("username");
  if (username) {
    document.getElementById("username").value = username;
  }
}

// 判断当前页面是登录页面还是注册页面
if (document.title === "Login Page") {
  initLoginPage();
} else if (document.title === "Register Page") {
  initRegisterPage();
}

Dans ce code, nous avons créé une fonction appelée doLogin() pour gérer la logique de connexion de l'utilisateur. Nous obtenons d’abord le numéro de compte et le mot de passe saisis par l’utilisateur, puis vérifions ces informations. Dans cet exemple, nous utilisons un simple nom d'utilisateur et un mot de passe pour l'authentification. Lorsque le nom d'utilisateur et le mot de passe sont saisis correctement, la boîte de dialogue « Connexion réussie ! » apparaît ; sinon, la boîte de dialogue « Nom d'utilisateur ou mot de passe incorrect ! » apparaît.

Enfin, nous avons ajouté un événement d'écoute pour le bouton de connexion via la fonction addEventListener() dans le code JavaScript. Lorsque vous cliquez sur le bouton, la fonction doLogin() sera activée. être appelé. Gérer les entrées de l'utilisateur.

3. Mise en œuvre de l'enregistrement du site Web/de l'application

Semblable à la mise en œuvre de la fonction de connexion, nous devons également d'abord déterminer les informations requises pour l'enregistrement de l'utilisateur, y compris le numéro de compte, le mot de passe et le mot de passe de confirmation. Ici, nous devons ajouter une vérification pour le champ « Confirmer le mot de passe ». Voici le code HTML d'une page d'inscription de base :

rrreee

De même, dans ce code HTML, nous utilisons la balise ff9c23ada1bcecdd1a0fb5d5a0f18437 pour inclure la zone de saisie utilisateur et le bouton d'inscription, 5894f699bff7998df3cb83984c8d0cb6 est utilisée pour décrire l'objectif de la zone de saisie, l'étiquette d5fd7aea971a85678ba271703566ebfd est utilisée pour créer une zone de saisie et le <button&gt ; le label est utilisé pour créer un bouton d'inscription. 🎜🎜Dans ce code HTML, nous spécifions un fichier JavaScript nommé "register.js" pour implémenter la logique d'enregistrement. Voici le code de ce fichier JavaScript : 🎜rrreee🎜Dans ce code, nous avons créé une fonction appelée doRegister() pour gérer la logique d'enregistrement des utilisateurs. De même, nous obtenons le numéro de compte, le mot de passe et le mot de passe de confirmation saisis par l'utilisateur et vérifions ces informations. Dans cet exemple, nous effectuons trois vérifications : le nom d'utilisateur ne peut pas être vide, le mot de passe et le mot de passe de confirmation ne peuvent pas être vides, et le mot de passe et le mot de passe de confirmation doivent être cohérents. Lorsque ces trois conditions sont remplies, une boîte de dialogue « Enregistrement réussi ! » apparaît. 🎜🎜Enfin, nous avons ajouté un événement d'écoute pour le bouton d'enregistrement via la fonction addEventListener() dans le code JavaScript. Lorsque vous cliquez sur le bouton, la fonction doRegister() sera activée. être appelé. Gérer les entrées de l'utilisateur. 🎜🎜4. Implémenter le stockage local des données🎜🎜Le code ci-dessus termine la mise en œuvre de la fonction de connexion/enregistrement de base, mais la zone de saisie sera effacée à chaque fois qu'elle est rechargée ou que les données sont saisies de manière incorrecte, ce qui entraîne une mauvaise expérience utilisateur, nous devons donc stocker les données localement, c'est-à-dire que le stockage local est implémenté. Nous utilisons localStorage pour le stockage des données, qui utilise des paires clé-valeur pour stocker les données et fournit setItem, getItem et d'autres interfaces associées pour effectuer le travail de stockage. 🎜🎜Voici l'exemple de code modifié : 🎜rrreee🎜Dans ce code, nous utilisons localStorage pour implémenter le stockage local des données. Lorsque l'utilisateur se connecte ou s'inscrit avec succès, nous stockons le nom d'utilisateur et le mot de passe dans localStorage. Lorsque la page se recharge, nous obtenons le nom d'utilisateur et le mot de passe de localStorage et les remplissons dans les zones de saisie correspondantes. De cette manière, les utilisateurs peuvent conserver les dernières données saisies après avoir rechargé la page, améliorant ainsi la commodité de l'interaction avec la page. 🎜🎜Résumé🎜

Ce qui précède présente les méthodes et étapes permettant à JavaScript de mettre en œuvre les fonctions de connexion et d'enregistrement des sites Web et des applications. Grâce à ces exemples de code, nous avons appris à utiliser JavaScript pour implémenter les fonctions de base des sites Web et des applications, et à implémenter le stockage local des données pour améliorer la commodité de l'interaction avec les pages. Bien entendu, ces exemples de code ne montrent que l'implémentation des fonctions de connexion/enregistrement les plus élémentaires, et les développeurs peuvent effectuer un travail de développement plus complexe en fonction des besoins réels.

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!

JavaScript css html register 接口 JS 事件 input

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：Android modifier javascriptArticle suivant：Android modifier javascript

Articles Liés

Voir plus