Utilisez jquery pour implémenter une connexion personnalisée

Connexion personnalisée avec jQuery

Avec le développement continu des applications Web, de plus en plus de sites Web et d'applications nécessitent que les utilisateurs se connectent pour accéder à toutes leurs fonctions. Après des années de développement, la connexion personnalisée est devenue le moyen le plus basique et le plus courant, et jQuery est devenu l'un des outils les plus populaires pour réaliser cette fonctionnalité.

Cet article explique comment utiliser jQuery pour implémenter une connexion personnalisée, y compris les aspects suivants :

• Processus d'implémentation
• Structure HTML
• Style CSS
• Code jQuery

Processus d'implémentation

Avant de commencer l'implémentation, vous besoin de comprendre le premier processus de mise en œuvre. De manière générale, le processus de mise en œuvre de la connexion personnalisée est le suivant :

• Écrivez la structure HTML
• Écrivez le style CSS
• Écrivez le code jQuery
• Envoyez le nom d'utilisateur et le mot de passe saisis par l'utilisateur au serveur pour vérification
• Si la vérification réussit, la connexion est réussie. Sinon, un message d'erreur s'affichera

Cet article se concentre principalement sur les trois premières étapes. Les deux dernières étapes impliquent des programmes côté serveur et des opérations liées à la base de données. ne sera pas décrit ici.

Structure HTML

Vous devez d'abord écrire la structure HTML. Le formulaire de connexion contient généralement un nom d'utilisateur, un mot de passe et un bouton de connexion, et peut utiliser la structure suivante :

<div id="login-form">
  <h2>登录</h2>
  <form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" required>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required>
    <button type="submit">登录</button>
  </form>
</div>

Il convient de noter que les balises d'entrée du nom d'utilisateur et du mot de passe doivent être définies avec l'attribut required 属性，以保证用户必须填写这两个字段，并且必须使用 name pour spécifier le nom du champ qui sera utilisé. plus tard.

Style CSS

Ensuite, vous devez écrire des styles CSS pour garantir l'affichage et le style du formulaire de connexion. Seul le style de référence est fourni ici :

#login-form {
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

#login-form h2 {
  text-align: center;
}

#login-form form {
  display: flex;
  flex-direction: column;
}

#login-form label {
  margin-top: 10px;
}

#login-form input[type="text"],
#login-form input[type="password"] {
  height: 30px;
  padding: 5px;
  border: none;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

#login-form button[type="submit"] {
  margin-top: 20px;
  padding: 10px;
  border: none;
  border-radius: 5px;
  background: #007bff;
  color: #fff;
  cursor: pointer;
}

#login-form button[type="submit"]:hover {
  background: #0062cc;
}

Ce style est relativement simple, et il vous suffit de vous assurer de la mise en page et du style du formulaire de connexion. Code jQuery message d'erreur ou message de réussite de connexion

$(document).ready(function() {
  $('#login-form form').on('submit', function(e) {
    e.preventDefault(); // 阻止表单提交事件
    var username = $(this).find('input[name="username"]').val(); // 获取用户名
    var password = $(this).find('input[name="password"]').val(); // 获取密码
    $.ajax({
      type: 'POST',
      url: 'login.php', // 处理登录请求的服务器端程序
      data: { // 向服务器发送的数据
        username: username,
        password: password
      },
      success: function(res) { // 登录成功，刷新页面或跳转到其他页面
        alert('登录成功！');
        location.reload();
      },
      error: function(xhr, status, err) { // 登录失败，提示错误信息
        alert('登录失败：' + err);
      }
    });
  });
});

• Jusqu'à présent, le processus de base d'utilisation de jQuery pour implémenter une connexion personnalisée a été introduit. Il convient de noter que cela ne fournit qu'un exemple simple. Dans les applications réelles, davantage de problèmes de sécurité doivent être pris en compte, tels que le cryptage des mots de passe.

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!