Home > Article > Web Front-end > JavaScript login interface jumps successfully

JavaScript login interface jumps successfully

WBOYOriginal: 2023-05-09 22:46:082799browse

In the modern web development field, the login interface is a very common function. In the world of JavaScript, we can use many libraries and frameworks to achieve this function. This article will use a simple example to demonstrate how to use JavaScript to write a login interface and successfully jump to the page.

First, we need to create a login form in the HTML page. The form should contain username and password fields and should also have a submit button. The code is as follows:

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

If you need to add some styles to this form, you can use a CSS style sheet to set it.

Next, we need to write JavaScript code to implement login verification and page jump functions. We can use jQuery library to simplify the task. The code is as follows:

$(document).ready(function() {
  $('#login-button').click(function(event) {
    event.preventDefault();
    var username = $('#username').val();
    var password = $('#password').val();
    if (username == 'test' && password == '123') {
      window.location.href = 'success.html';
    } else {
      alert('用户名或密码错误！');
    }
  });
});

In the above code, we first use the $(document).ready() function to bind the click event of the login button after the page is loaded. In the click event handler function, we first use event.preventDefault() to prevent the form's default submission behavior. We then get the username and password values from the form and do a simple validation. If the username is test and the password is 123, then we use window.location.href to jump to the page success.html page. If verification fails, a prompt box will pop up.

Finally, we also need to create a success.html page on the server. This page can display some welcome information or other content to indicate successful login. For example:

<html>
  <head>
    <title>登录成功</title>
  </head>
  <body>
    <h1>欢迎！</h1>
    <p>您已成功登录！</p>
  </body>
</html>

Through the above steps, we can write a web page that uses JavaScript to implement login verification and page jump functions. Of course, there are many details and extensions that can be adjusted and added according to actual needs.

The above is the detailed content of JavaScript login interface jumps successfully. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript cannot get the formNext article：JavaScript cannot get the form

See more

JavaScript login interface jumps successfully

Related articles