如何使用 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>

回答也展示了如何使用 on blur 功能

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

How to validate email addresses using vuelidate?

vuelidate

vetur

如何验证电子邮件？