How to set up jump on layui login page

下次还敢
Release: 2024-04-04 03:12:40
Original
767 people have browsed it

How to set a jump on the layui login page

The layui framework provides a convenient way to set a login page jump. The specific steps are as follows:

1. Add jump code

In the login.html page, add the following code in the click event of the login form submit button:

<code class="html">form.on('submit(login)', function(data){
  if(data.field.username === 'admin' && data.field.password === '123456'){
    // 成功登录,跳转到指定页面
    window.location.href = 'index.html';
  }else{
    // 登录失败,提示错误信息
    layer.msg('用户名或密码错误');
  }
  return false;
});</code>
Copy after login

2. Modify the form configuration

In the form element of lay-filter="login", add the following configuration items:

<code class="html"><form class="layui-form" lay-filter="login">
  <input type="hidden" name="redirect" value="index.html">
</form></code>
Copy after login

Principle explanation:

  • When the user clicks the login button, the form.on('submit(login)' function is triggered.
  • If the user If the name and password are correct, jump to the page specified by window.location.href. The hidden input field of
  • name="redirect" is used to specify the page to jump to. Target page. When the form is submitted, this value will be passed to the server.
  • On the server side, you can jump based on the value of the redirect parameter to achieve jumping to after logging in. Specify the function of the page.

The above is the detailed content of How to set up jump on layui login page. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
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
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template