HTML, CSS et jQuery : créez une belle validation de formulaire de connexion

HTML, CSS et jQuery : créez une belle validation de formulaire de connexion

Dans le développement Web, les formulaires de connexion sont un composant courant. La validation du formulaire est une étape importante pour garantir la sécurité et l'exactitude lorsque les utilisateurs se connectent à un site Web ou à une application. Cet article expliquera comment créer une belle vérification de formulaire de connexion à l'aide de HTML, CSS et jQuery, et fournira des exemples de code spécifiques.

Étape 1 : Initialiser la structure HTML

Tout d'abord, créons la structure HTML. Voici un exemple de formulaire de connexion de base :

<form id="login-form">
  <h2 id="用户登录">用户登录</h2>
  <input type="text" id="username" placeholder="用户名">
  <input type="password" id="password" placeholder="密码">
  <button type="submit">登录</button>
</form>

Étape 2 : ajouter des styles CSS

Pour rendre le formulaire de connexion plus joli, nous devons y ajouter des styles CSS. Voici un exemple CSS de base :

#login-form {
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
}

h2 {
  margin-bottom: 20px;
}

input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

Troisième étape : Écrire la logique de validation jQuery

Maintenant, ajoutons une logique de validation de formulaire à l'aide de jQuery. Nous vérifierons le nom d'utilisateur et le mot de passe lors de la soumission du formulaire. Si la vérification réussit, l'utilisateur sera autorisé à se connecter ; si la vérification échoue, un message d'erreur s'affichera.

Voici un exemple jQuery de base :

$(document).ready(function() {
  $("#login-form").submit(function(event) {
    event.preventDefault(); // 阻止表单提交

    var username = $("#username").val();
    var password = $("#password").val();

    // 对用户名和密码进行验证
    if (username === "" || password === "") {
      $("#login-error").html("请填写用户名和密码");
    } else if (username !== "admin" || password !== "123456") {
      $("#login-error").html("用户名或密码不正确");
    } else {
      $("#login-error").html(""); // 清空错误消息
      // 登录成功之后的操作
    }
  });
});

Étape 4 : Afficher le message d'erreur

Afin d'afficher le message d'erreur, nous devons ajouter un élément permettant d'afficher le message d'erreur à la structure HTML.

<div id="login-error"></div>

Lorsque le formulaire est soumis, nous mettons à jour dynamiquement cet élément en fonction des résultats de validation.

Exemple de code complet

Voici l'exemple complet avec tout le code HTML, CSS et jQuery :

  
  


  

    
用户登录
    
    
    登录
  
  <div id="login-error"></div>

  
  <script>
    /* jQuery验证逻辑 */
  </script>

Conclusion

Avec HTML, CSS et jQuery, nous pouvons facilement créer une belle validation de formulaire de connexion. Lorsque l'utilisateur soumet le formulaire, nous utilisons jQuery pour valider la saisie et afficher un message d'erreur basé sur le résultat de la validation. J'espère que cet article vous aidera !

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!