這次帶給大家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元素中只有一個輸入框時,在該輸入框中按下回車會自動提交表單。透過在
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.js實作可設定登入表單步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!