原始輸入的初始狀態

我有一個非常簡單的電子郵件輸入，我在其中驗證失敗時動態綁定CSS類。原始輸入的初始狀態

我在狀態中使用一個標誌來跟蹤它是否被驗證。

顯然，默認情況下，它沒有被驗證。然而，將輸入作爲一種失敗立即投入是相當令人討厭的。

我希望在做任何更改之前避免顯示驗證失敗。

顯然這是一個設計問題比實現更多，但我已經添加了我的代碼以供參考（Vue.js）。

你會怎麼做呢？

<template> 
    <p class="control has-addons"> 
    <input 
     v-model="email" 
     class="input is-large" 
     :class="{'is-danger': !validated}" 
     placeholder="Email"> 
    <a 
     @click.prevent="submitEmail" 
     class="button is-info is-large"> 
     Subscribe 
    </a> 
    </p> 
</template> 

<script> 
import { isEmail } from 'validator' 
export default { 
    data() { 
    return { 
     email: '', 
     validated: false 
    } 
    }, 
    methods: { 
    submitEmail() { 
     if (isEmail(event.target.value)) { 
     this.validated = true 
     this.$store.dispatch('submit_email', this.email) 
     } else { 
     this.validated = false 
     } 
    } 
    } 
} 
</script>

來源

2017-02-04 softcode

Vue不提供"dirty" checking。

一種選擇是使您的電子郵件變量變爲具有「髒」屬性的對象。

email: { 
     "value": null, 
     "dirty": false, 
     "validated": false, 
     },

這樣，您的代碼將很容易跟蹤，因爲您添加更多的輸入字段。

來源

2017-02-04 16:02:48 retrograde

我真的很喜歡解決方案，仍然添加數據鍵，但更優雅 – softcode

跟蹤一個叫做visited的狀態鍵。當字段模糊時，將訪問設置爲true。更新您的課程條件爲visited && !validated。

這意味着你不會開始顯示任何錯誤狀態，直到用戶已經集中，然後從字段中移除而未正確填寫。

來源

2017-02-04 04:52:31 shadymoses

謝謝你的回答，試圖避免添加密鑰。 – softcode

如果什麼都沒有出現，我會接受 – softcode

如果你只想在字段被訪問後才添加那個類，我不會看到你會怎麼做比使用新的狀態鍵更乾淨。這正是這種狀態。 – shadymoses

原始輸入的初始狀態

回答

相關問題