HTML, CSS, and jQuery: Build a beautiful login form validation

HTML, CSS, and jQuery: Build a beautiful login form validation

In web development, the login form is a common component. Form validation is an important step to ensure security and accuracy when users log in to a website or application. This article will introduce how to build a beautiful login form verification using HTML, CSS and jQuery, and provide specific code examples.

Step 1: Initialize the HTML structure

First, let us create the HTML structure. Here is a basic login form example:

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

Step 2: Add CSS Styles

To make the login form look prettier, we need to add some CSS styles to it. Here is a basic CSS example:

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

Step Three: Write jQuery Validation Logic

Now, let’s use jQuery to add form validation logic. We will verify the username and password when submitting the form. If the verification is successful, the user will be allowed to log in; if the verification fails, an error message will be displayed.

The following is a basic jQuery example:

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

Step 4: Display the error message

In order to display the error message, we need to add a display to the HTML structure Elements of the error message.

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

When the form is submitted, we dynamically update this element based on the validation results.

Full code example

Here is a complete example with all the HTML, CSS and jQuery code:

<title>登录表单验证</title>
<style>
  /* CSS样式 */
</style>


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

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
  /* jQuery验证逻辑 */
</script>

Conclusion

With HTML, CSS and jQuery, We can easily build a beautiful login form validation. When the user submits the form, we use jQuery to validate the input and display an error message based on the validation result. Hope this article helps you!

The above is the detailed content of HTML, CSS, and jQuery: Build a beautiful login form validation. For more information, please follow other related articles on the PHP Chinese website!