Use jquery to implement custom login

Using jQuery to implement custom login

With the continuous development of web applications, more and more websites and applications require users to log in to access all their functions. After years of development, custom login has become the most basic and common way, and jQuery has become one of the popular tools to achieve this feature.

This article will introduce how to use jQuery to implement customized login, including the following aspects:

• Implementation process
• HTML structure
• CSS style
• jQuery code

Implementation process

Before starting the implementation, you need to understand the implementation process. Generally speaking, the implementation process of custom login is as follows:

• Write HTML structure
• Write CSS style
• Write jQuery code
• Add user The entered user name and password are sent to the server for verification
• If the verification is successful, the login is successful, otherwise an error message is prompted

This article mainly focuses on the first three steps, and the last two steps involve the server-side program Operations related to the database will not be described here.

HTML structure

First you need to write the HTML structure. The login form usually contains username, password and login button, and can use the following structure:

<div id="login-form">
  <h2 id="登录">登录</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>

It should be noted that the input tags of username and password must set the required attribute to ensure that the user These two fields must be filled in, and the field name must be specified using the name attribute, which will be used later.

CSS Style

Next, you need to write CSS styles to ensure the display and style of the login form. Only the reference style is provided here:

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

This style is relatively simple and only needs to ensure the layout and style of the login form.

jQuery code

Finally, you need to write jQuery code to achieve the following functions:

• Listen to the submit event of the form
• Get the user input from the user Name and password
• Verify username and password
• Prompt error message or login success message

The following is the implementation code:

$(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);
      }
    });
  });
});

What needs to be noted is , when sending a request, the username and password need to be sent to the server-side program in the form of objects, and the server-side program needs to be able to receive these two pieces of information and verify them. If the verification is successful, login success information is sent to the client, otherwise login failure information is sent to the client.

So far, the basic process of using jQuery to implement custom login has been introduced. It should be noted that this only provides a simple example. In actual applications, more security issues need to be considered, such as password encryption.

The above is the detailed content of Use jquery to implement custom login. For more information, please follow other related articles on the PHP Chinese website!