原始输入的初始状态

Question

我有一个非常简单的电子邮件输入，我在验证失败时动态绑定 CSS class。

我在状态中使用标志来跟踪它是否经过验证。

显然，默认情况下，它是不被验证的。然而，立即将输入设置为失败是相当令人讨厌的。

我希望它在进行任何更改之前避免显示验证失败。

显然这是一个设计问题而不是实现问题，但是我在下面添加了我的代码以供参考 (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。将您的 class 条件更新为 visited && !validated。

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

Answer 2

Vue 不提供 "dirty" checking.

一个选项是使您的电子邮件变量成为一个属性为 "dirty" 的对象。

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

这样，当您添加更多输入字段时，您的代码将很容易被跟踪。

原始输入的初始状态

Initial state for pristine input

javascript

validation

frontend