這次帶給大家Vue.js實作自訂登入表單，Vue.js實作自訂登入表單的注意事項有哪些，以下就是實戰案例，一起來看一下。
z表單是後台專案業務中的常用元件，這次重構了登入功能以滿足登入方式可設定的需求，在此記錄和分享。
業務場景
在之前，專案只支援手機號碼密碼登錄，前端是直接把表單寫死的，後來有客戶希望能支持驗證碼登錄，有的客戶還希望能有手機號驗證碼密碼的登入方式…所以登入方式的彈性需要可設定的表單支持，於是我把登入元件做了拆分。
以表單元素為粒度，分離出了手機號碼、密碼、簡訊驗證碼這幾個元件，它們內部都有自己的表單驗證方法，透過組合可以快速完成登入、註冊、找回密碼等表單元件。高內聚低耦合、高內聚低耦合…跟著念十遍~
.
├ 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標籤
以上是Vue.js實作自訂登入表單的詳細內容。更多資訊請關注PHP中文網其他相關文章！
