Question

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

Answer 1

跟踪另一个名为visited的状态键。当字段变得模糊时，将visited设置为true。将您的课程条件更新为visited && !validated。

这意味着你不会开始显示任何错误状态，直到用户聚焦，然后离开字段而没有正确填写它。

Answer 2

Vue不提供"dirty" checking。

一种选择是使您的电子邮件变量成为具有“脏”属性的对象。

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

这样，您可以在添加更多输入字段时轻松跟踪代码。

原始输入的初始状态

2 个答案: