vuelidate - 如何使用 vuelidate 验证电子邮件地址？

Question

如何验证电子邮件？

请您展示一个带有错误消息的示例吗？

文档没有提供足够的细节。

似乎没有什么像v-if="!$v.user.email.email"

以下代码也不起作用

validations: {
 user: {
  email: {
        required,
        email: email(),
      },
 }
}

Answer 1

实际上，我错了， 就像您v-if="!$v.user.email.email" 不需要电子邮件验证器的任何详细信息一样。

所有你需要的是

 email: {
        email,
      },

如果您有任何 Vetur 错误，只需卸载 Vetur 并重新安装。

Vue.use(window.vuelidate.default)
const { email } = window.validators

new Vue({
    el: "#app",
  data: {
    user: {
     email: ""
    }
  },
  validations: {
    user:{
        email: {
          email
        }
    }
  },
  methods: {
    status(validation) {
        return {
        error: validation.$error,
        dirty: validation.$dirty
      }
    }
  }
})

input {
  border: 1px solid silver;
  border-radius: 4px;
  background: white;
  padding: 5px 10px;
}

.dirty {
  border-color: #5A5;
  background: #EFE;
}

.error {
  border-color: red;
  background: #FDD;
}

<script src="https://cdn.jsdelivr.net/combine/npm/vuelidate@0.7.5/dist/validators.min.js,npm/vuelidate@0.7.5/dist/vuelidate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input v-model="$v.user.email.$model" :class="status($v.user.email)">
   <div class="error" v-if="!$v.user.email.email">this must be an email</div>
  <pre>{{ $v }}</pre>
</div>

---

回答https://stackoverflow.com/a/61359412/11993949也展示了如何使用模糊功能