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

【问题标题】：How to validate email addresses using vuelidate?如何使用 vuelidate 验证电子邮件地址？
【发布时间】：2020-08-06 07:34:11
【问题描述】：

如何验证电子邮件？

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

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

好像没有v-if="!$v.user.email.email"这样的东西

以下代码也不起作用

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

【问题讨论】：

标签： vuelidate vetur

【解决方案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>

Answer https://stackoverflow.com/a/61359412/11993949 也展示了如何使用 on blur 功能

【讨论】：