首頁 > web前端 > js教程 > 主體

Vue.js實作可設定登入表單步驟詳解

php中世界最好的语言
發布: 2018-05-08 11:21:03
原創
1726 人瀏覽過

這次帶給大家Vue.js實作可設定登入表單步驟詳解,Vue.js實作可設定登入表單的注意事項有哪些,以下就是實戰案例,一起來看一下。

業務場景

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

 

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

.
├ 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中文網其它相關文章!

推薦閱讀:

Vue把html字串轉換為HTML步驟詳解

Koa2檔案上傳下載案例詳解

以上是Vue.js實作可設定登入表單步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!