原始输入的初始状态

我有一个非常简单的电子邮件输入，我在其中验证失败时动态绑定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

原始输入的初始状态

回答

相关问题