HTML、CSS、および jQuery: 美しいログイン フォーム検証を構築する

HTML、CSS、および jQuery: 美しいログイン フォーム検証を構築する

Web 開発では、ログイン フォームは一般的なコンポーネントです。フォームの検証は、ユーザーが Web サイトまたはアプリケーションにログインする際のセキュリティと正確性を確保するための重要な手順です。この記事では、HTML、CSS、jQuery を使用して美しいログイン フォーム検証を構築する方法と、具体的なコード例を紹介します。

ステップ 1: HTML 構造を初期化する

まず、HTML 構造を作成しましょう。基本的なログイン フォームの例を次に示します。

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

ステップ 2: CSS スタイルの追加

ログイン フォームの見栄えを良くするには、いくつかの CSS スタイルを追加する必要があります。基本的な CSS の例を次に示します。

#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;
}

ステップ 3: jQuery 検証ロジックを作成する

次に、jQuery を使用してフォーム検証ロジックを追加しましょう。フォーム送信時にユーザー名とパスワードを確認させていただきます。検証が成功すると、ユーザーはログインが許可されますが、検証が失敗すると、エラー メッセージが表示されます。

以下は基本的な jQuery の例です:

$(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(""); // 清空错误消息
      // 登录成功之后的操作
    }
  });
});

ステップ 4: エラー メッセージを表示する

エラー メッセージを表示するには、ディスプレイをHTML 構造 エラー メッセージの要素。

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

フォームが送信されると、検証結果に基づいてこの要素が動的に更新されます。

完全なコード例

すべての HTML、CSS、および jQuery コードを含む完全な例を次に示します:

  
  


  

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

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

結論

HTML、CSS、および jQuery を使用する, 美しいログインフォーム検証を簡単に構築できます。ユーザーがフォームを送信すると、jQuery を使用して入力が検証され、検証結果に基づいてエラー メッセージが表示されます。この記事がお役に立てば幸いです!

以上がHTML、CSS、および jQuery: 美しいログイン フォーム検証を構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。