我的應用程式的登錄表單的作業方式類似于 Google 帳戶登錄 - 首先用戶輸入他們的電子郵件地址，然后他們被重定向到他們的 SSO 或顯示一個密碼欄位。
在 Chromium 檔案中，Google 將其稱為“電子郵件首次登錄流程”，并推薦以下結構以使密碼管理器能夠理解該表單：
收集電子郵件：
<form id="login" action="login.php" method="post"> <input type="text" autocomplete="username"> <input type="submit" value="Sign In!"> </form>然后收集密碼，但包括電子郵件作為隱藏表單欄位的值：
<style> #emailfield { display: none; } </style> <form id="login" action="login.php" method="post"> <input id="emailfield" type="text" value="[email protected]" autocomplete="username"> <input type="password" autocomplete="current-password"> <input type="submit" value="Sign In!"> </form>
這是我在 Vue 中實作的方法（使用 Vuetify）：
<template>
<v-app id="sm-login">
<v-container class="fill-height" fluid>
<v-card class="mx-auto px-10 pb-9" width="450px" :loading="loading">
<v-card-title class="justify-center pt-12">My App</v-card-title>
<v-card-subtitle class="text-center py-6 headline">Log In</v-card-subtitle>
<v-card-text class="text-center">
<v-form ref="form1" v-if="showForm === 1" @submit.prevent="lookupEmail">
<v-text-field
autocomplete="username"
label="Email"
v-model.trim="email"
name="email"
outlined
ref="email"
required
type="email"
:error-messages="errorMessage"
:rules="[rules.required, rules.email]" />
</v-form>
<v-form ref="form2" v-if="showForm === 2" @submit.prevent="login">
<input style="display:none" name="email" type="email" v-model="email" readonly autocomplete="username" />
<v-chip outlined class="mb-6" close @click:close="showForm = 1"><v-avatar left><v-icon>mdi-account-circle</v-icon></v-avatar> {{email}}</v-chip>
<v-text-field
label="Password"
v-model="password"
name="password"
outlined
ref="password"
required
spellcheck="false"
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
:autocomplete="showPassword ? 'off' : 'current-password'"
:error-messages="errorMessage"
:type="showPassword ? 'text' : 'password'"
@click:append="showPassword = !showPassword"
/>
</v-form>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn color="primary" @click="clickButton">{{nextButton}}</v-btn>
</v-card-actions>
</v-card>
</v-container>
</v-app>
</template>
<script>
export default {
data() {
return {
loading: false,
email: '',
password: '',
errorMessage: '',
showForm: 1,
showPassword: false,
rules: {
required: value => !!value || Lang.get('validation-short.email'),
email: value => {
const pattern = /^(([^<>()[\]\\.,;:\s@"] (\.[^<>()[\]\\.,;:\s@"] )*)|(". "))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9] \.) [a-zA-Z]{2,}))$/
return pattern.test(value) || Lang.get('validation-short.email')
},
},
};
},
computed: {
nextButton() {
switch (this.showForm) {
case 1:
return Lang.get('auth.next');
case 2:
return Lang.get('auth.log-in');
}
},
},
methods: {
lookupEmail() {
if (this.$refs.form1.validate()) {
// The email lookup is done here, and either
// redirected to SSO or set `this.showForm = 2`
}
},
login() {
if (this.$refs.form2.validate()) {
// Login is done here
}
},
clickButton() {
switch (this.showForm) {
case 1: return this.lookupEmail();
case 2: return this.login();
}
}
}
};
按Enter第一個表單（焦點為電子郵件欄位）作業正常 - 它呼叫該lookupEmail函式。但是，在第二個表單上按下它（密碼欄位處于焦點）沒有任何作用。當我注釋掉第二個表單中隱藏的電子郵件欄位時，Enter密鑰按預期提交表單（但密碼管理器沒有填充電子郵件地址）。
當我看在Vue公司DevTools延伸“活動”選項卡上，我看到電子郵件欄位觸發兩個事件，keydown就<VTextField>和submit上<VForm>。但是，Password 欄位僅在keydown上觸發事件，<VTextField>但該submit事件不會出現在 DevTools 中。
為什么隱藏欄位會導致表單停止捕捉submit事件？
uj5u.com熱心網友回復：
不知何故，這似乎與使用v-model隱藏欄位有關。
更改代碼：
<input style="display:none" name="email" type="email" v-model="email" readonly autocomplete="username" />
到：
<input name="email" type="hidden" :value="email" autocomplete="username" />
似乎解決了這個問題。
請注意，這兩個更改似乎都是必需的：從display: none到type="hidden"和從v-model=到:value=
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/379752.html
標籤：javascript 形式 Vue.js Vuetify.js
上一篇：表單輸入占位符在回應模式下消失