首頁  >  文章  >  web前端  >  layui登陸頁怎麼設定跳轉

layui登陸頁怎麼設定跳轉

下次还敢
下次还敢原創
2024-04-04 03:12:40764瀏覽

如何在 layui 登入頁面設定跳轉

layui 框架提供了方便的方式來設定登入頁面跳轉。具體步驟如下:

1. 新增跳轉程式碼

在login.html 頁面中,在登入表單提交按鈕的點擊事件中加入以下程式碼:

<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>

2. 修改form 設定

在lay-filter="login" 的form 元素中,新增下列組態項目:

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

#原理解釋:

  • 當使用者點擊登入按鈕時,form.on('submit(login)' 函數被觸發。
  • 如果用戶名稱和密碼正確,則跳到window.location.href 指定的頁面。
  • name="redirect" 的隱藏輸入欄位用於指定跳躍的目標頁面。當form 提交時,該值將傳遞到伺服器端。
  • 在伺服器端,可以根據redirect 參數的值跳轉,從而實現登入後跳到指定頁面的功能。

以上是layui登陸頁怎麼設定跳轉的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn