初期入力の初期状態

Question

私は非常に簡単な電子メール入力を持っていますが、検証に失敗したときにCSSクラスを動的にバインドしています。

私はフラグがstateで有効であるかどうかを追跡するためにフラグを使用しています。

明らかに、デフォルトでは検証されません。しかし、バットのすぐ下の失敗としてインプットをスタイルするのはむしろ面倒です。

変更が行われる前に検証の失敗を表示しないようにしたいと思います。

明らかにこれは設計上の問題ですが、参考のために私のコードを追加しました（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> 

Answer 1

Vueは"dirty" checkingを提供しません。

1つの選択肢は、電子メール変数を「ダーティー」というプロパティを持つオブジェクトにすることです。

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

この方法で、入力フィールドを追加するとコードを追跡するのが簡単になります。

Answer 2

visitedと呼ばれるもう1つの状態キーを追跡します。フィールドがぼやけた場合はvisitedをtrueに設定します。クラス条件をvisited && !validatedに更新してください。

これは、ユーザーがフォーカスを合わせてから、フィールドを正しく塗りつぶさずに離れていくまで、エラー状態の表示を開始しないことを意味します。