首頁 web前端 js教程 如何實作能被設定登入表單

如何實作能被設定登入表單

May 03, 2018 am 09:42 AM
登入 配置

這次帶給大家如何實現能被設定登入表單,實作能被設定登入表單的注意事項有哪些,以下就是實戰案例,一起來看一下。

業務場景

在之前,專案只支援手機號碼密碼登錄,前端是直接把表單寫死的,後來有客戶希望能支持驗證碼登錄,有的客戶還希望能有手機號驗證碼密碼的登入方式…所以登入方式的彈性需要可設定的表單支持,於是我把登入元件做了拆分。

 

以表單元素為粒度,分離出了手機號碼、密碼、簡訊驗證碼這幾個元件,它們內部都有自己的表單驗證方法,透過組合可以快速完成登入、註冊、找回密碼等表單元件。高內聚低耦合、高內聚低耦合…跟著念十遍~

.
├ common
├ captcha.vue
|  ├ password.vue
|  └ phone.vue
├ login
|  └ index.vue
├ register
|  └ index.vue
└ resetPassword
  └ index.vue
登入後複製

這裡我們將login作為父元件,讀取服務端返回的登入配置並在模板做條件渲染,登入時調用子元件內部的表單驗證,最後透過Vuex拿到資料呼叫介面。整個可設定登入表單的邏輯就是醬子,接下來上程式碼。

程式碼

請求服務端設定資料:

/* 参数说明:
 * 'password': 密码登录 
 * 'captcha': 短信验证码登录
 * 'password_or_captcha': 密码或短信登录 
 * 'password_with_captcha': 密码+短信登录
 */
config: {
 login_methods: 'password'
}
登入後複製

登入元件的核心渲染程式碼(pug):

.login-card
 .login-header
   h3 登录
 .login-content
  phone(ref="phone")
  password(
   v-if="isPasswordMode"
   ref="password"
  )
  captcha(
   v-if="isCaptchaMode"
   ref="captcha"
  )  
  template(v-if="isPasswordWithCaptchaMode")
   captcha(ref="captcha")
   password(ref="password")
  
  template(v-if="isPasswordOrCaptchaMode")
   ...
  el-button(@click="login") 登录
登入後複製

登入時需要三個步驟:表單驗證、組裝資料、呼叫介面:

async login () {
 if (!this.validate()) return
 const loginData = this.getLoginData()
 await this.postLogin(loginData)
 ...
}
登入後複製

登入的表單驗證其實是對目前登入方式中所有元件的validate() 方法進行邏輯判斷:

validate () {
 const phone = this.$refs.phone.validate()
 let isPass = false
  
 if (this.isPasswordMode) {
  if (this.$refs.password) isPass = this.$refs.password.validate()
 }
  
 if (this.isCaptchaMode) {
  if (this.$refs.captcha) isPass = this.$refs.captcha.validate()
 }
  
 if (this.isPasswordWithCaptchaMode) ...
  
 if (this.isPasswordOrCaptchaMode) ...
  
 isPass = phone && isPass
 return isPass
}
登入後複製

每個子元件都是完整的表單,驗證也由自己完成,password元件範本:

.login-password
 el-form(
  :model="form"
  :rules="rules"
  ref="form"
  @submit.native.prevent=""
 )
  el-form-item(prop="password")
   el-input(
    v-model="form.password"
    type="password"
    name="password"
   )
登入後複製

W3C: When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

需要注意,根據W3C標準, 當一個form元素中只有一個輸入框時,在該輸入框中按下回車會自動提交表單。透過在 新增 @submit.native.prevent 可以阻止此預設行為。

password元件的表單驗證:

validate () {
 let res = false
 this.$refs.form.validate((valid) => {
  res = valid
 })
 return res
}
登入後複製

最後從Vuex拿到所有表單數據,進行組裝:

computed: {
 ...mapState('login', {
  phone: state => state.phone,
  password: state => state.password,
  captcha: state => state.captcha
 }), 
},
methods: {
 ... 
 getLoginData () {
  let mode = ''
  const phone = this.phone
  ...
  const data = { phone }
  
  if (this.isPasswordMode) {
   mode = 'password'
   data.password = password
  }
  if (this.isCaptchaMode) {
   mode = 'captcha'
   data.captcha = captcha
  } 
  if (this.isPasswordWithCaptchaMode) ...  
  if (this.isPasswordOrCaptchaMode) ...  
  data.mode = mode
  return data
 }
}
登入後複製

補充:

vue.js 全選與取消全選的實例代碼

new Vue({
  el: '#app',
  data: {
    checked: false,
    checkedNames: [],
    checkedArr: ["Runoob", "Taobao", "Google"]
  },
  methods: {
    changeAllChecked: function() {
      if (this.checked) {
        this.checkedNames = this.checkedArr
      } else {
        this.checkedNames = []
      }
    }
  },
  watch: {
    "checkedNames": function() {
      if (this.checkedNames.length == this.checkedArr.length) {
        this.checked = true
      } else {
        this.checked = false
      }
    }
  }
})
登入後複製

#相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

Npm run build如何打包不同域名

Koa2做出文件上傳下載功能

以上是如何實作能被設定登入表單的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

wallpaperengine登入別的號碼後下載別人的桌布怎麼辦 wallpaperengine登入別的號碼後下載別人的桌布怎麼辦 Mar 19, 2024 pm 02:00 PM

當你在自己電腦上登過別人steam帳號之後,剛好這個別人的帳號也有wallpaper軟體,切換回自己帳號之後steam就會自動下載別人帳號訂閱的桌布,使用者可以透過關閉steam雲端同步解決。 wallpaperengine登入別的號碼後下載別人的桌布怎麼辦1、登陸你自己的steam帳號,在設定裡面找到雲端同步,關閉steam雲端同步。 2.登陸你之前登陸的別人的steam帳號,打開wallpaper創意工坊,找到訂閱內容,然後取消全部訂閱。 (以後防止找不到壁紙,可以先收藏再取消訂閱)3、切換回自己的stea

小紅書怎麼登入以前的帳號?它換綁後原來號碼遺失了怎麼辦? 小紅書怎麼登入以前的帳號?它換綁後原來號碼遺失了怎麼辦? Mar 21, 2024 pm 09:41 PM

隨著社群媒體的快速發展,小紅書成為許多年輕人分享生活、探索新產品的熱門平台。在使用過程中,有時使用者可能會遇到登入先前帳號的困難。本文將詳細探討如何解決小紅書登入舊帳號的問題,以及如何應對更換綁定後可能遺失原帳號的情況。一、小紅書怎麼登入以前的帳號? 1.找回密碼登入如果長時間未登入小紅書,可能導致帳號被系統回收。為了恢復存取權限,你可以嘗試透過找回密碼的方式重新登入帳號。操作步驟如下:(1)開啟小紅書App或官網,點選「登入」按鈕。 (2)選擇「找回密碼」。 (3)輸入你註冊帳號時所使用的手機號碼

Discuz後台登入問題解決方法大揭秘 Discuz後台登入問題解決方法大揭秘 Mar 03, 2024 am 08:57 AM

Discuz後台登入問題解決方法大揭秘,需要具體程式碼範例隨著網路的快速發展,網站建置變得越來越普遍,而Discuz作為一款常用的論壇建站系統,受到了許多站長的青睞。然而,正是因為其功能強大,有時候我們在使用Discuz的過程中會遇到一些問題,例如後台登入問題。今天,我們就來大揭秘Discuz後台登入問題的解決方法,並且提供具體的程式碼範例,希望能幫助到有需要

快手電腦版怎麼登入-快手電腦版的登入方法 快手電腦版怎麼登入-快手電腦版的登入方法 Mar 04, 2024 pm 03:30 PM

近日有一些小夥伴諮詢小編快手電腦版怎麼登入?下面就為大家帶來了快手電腦版的登入方法,有需要的小夥伴可以來了解了解哦。第一步:先在電腦的瀏覽器上百度搜尋快手官網。第二步:在搜尋結果清單裡面選取第一條。第三步:進入快手官網主頁面後,點選影片的選項。第四步:點選右上角的使用者頭像。步驟五:在彈出的登入選單裡面點選二維碼登入。步驟六:之後打開手機上的快手,點選左上角的圖示。第七步:點選二維碼標誌。第八步:在我的二維碼介面點擊右上角的掃描圖示之後,掃描電腦上的二維碼即可。第九步:最後電腦版的快手就登入成

Linux系統中GDM的工作原理及配置方法 Linux系統中GDM的工作原理及配置方法 Mar 01, 2024 pm 06:36 PM

標題:Linux系統中GDM的工作原理及設定方法在Linux作業系統中,GDM(GNOMEDisplayManager)是一種常見的顯示管理器,用於控制圖形使用者介面(GUI)登入和使用者會話管理。本文將介紹GDM的工作原理和設定方法,以及提供具體的程式碼範例。一、GDM的工作原理GDM是GNOME桌面環境下的顯示管理器,負責啟動X伺服器並提供登入介面,使用者輸

了解Linux Bashrc:功能、設定與使用方法 了解Linux Bashrc:功能、設定與使用方法 Mar 20, 2024 pm 03:30 PM

了解LinuxBashrc:功能、配置與使用方法在Linux系統中,Bashrc(BourneAgainShellrunco​​mmands)是一個非常重要的配置文件,其中包含了系統啟動時自動運行的各種命令和設定。 Bashrc文件通常位於使用者的家目錄下,是一個隱藏文件,它的作用是為使用者自訂設定Bashshell的環境。一、Bashrc的功能設定環境

百度網盤網頁版怎麼進?百度網盤網頁版登入入口 百度網盤網頁版怎麼進?百度網盤網頁版登入入口 Mar 13, 2024 pm 04:58 PM

  百度網盤不僅能儲存各種軟體資源,還能分享給別人,支援多端同步,如果你的電腦沒有下載客戶端,可以選擇進入網頁版使用。那麼百度網盤網頁版要怎麼登入呢?下面就來看看詳細介紹。  百度網盤網頁版登入入口:https://pan.baidu.com(複製連結至瀏覽器開啟)  軟體介紹  1、分享  提供文件分享功能,使用者將文件整理,分享給需要的小夥伴。  2、雲端  不佔用太多內存,大多數檔案都保存在雲端,有效節省電腦空間。  3、相簿  支援雲相簿功能,將照片匯入到雲盤中,然後整理,方便大家查看。  

小紅書只記得帳號怎麼登入?只記得帳號怎麼找回來? 小紅書只記得帳號怎麼登入?只記得帳號怎麼找回來? Mar 23, 2024 pm 05:31 PM

小紅書如今已經融入了許多人的日常生活,其豐富的內容和便捷的操作方式讓使用者樂此不疲。有時候,我們可能會忘記帳號密碼,只記得帳號而無法登入確實讓人感到困擾。一、小紅書只記得帳號怎麼登入?當忘記密碼時,我們可以透過手機驗證碼的方式登入小紅書。具體操作如下:1.開啟小紅書App或網頁版小紅書;2.點選「登入」按鈕,選擇「帳號密碼登入」;3.點選「忘記密碼?」按鈕;4.輸入你的帳號,點選「下一步」;5.系統會發送驗證碼到你的手機,輸入驗證碼後點選「確定」;6.設定新的密碼並確認。你也可以透過第三方帳號(如

See all articles