使用 mailcheck.js 减少 Vue.js 应用程序中拼写错误的电子邮件地址

输入和捕捉电子邮件地址是每个单独的Web应用程序都必须照顾的事情。在注册表格上捕捉正确的电子邮件,登录表格,甚至在应用程序中执行重要操作时使用它作为确认字符串。

Mailcheck是那些小型客户端库之一,它做了一件好事,它检查电子邮件域的拼写是否错误,以及它如何与已知的域相匹配,如gmail.com,yahoo.com,或你的好朋友aol.com。

安装

Mailcheck 应该从 NPM 安装:

1npm install mailcheck -—save

在 Blur 上设置您的表单和处理电子邮件错误

我的建议是将模糊事件放到电子邮件字段,以检查用户完成键入后,以获得良好的用户体验,并立即提供反馈。

 1[label Form.js]
 2<template>
 3  <form>
 4    <div class='form--inputContainer is-field-withEmailSuggestion'>
 5      <input v-model="email" @blur="verifyEmail" placeholder="Email address" type='email'>
 6        <span v-if="mailCheckedEmail" class='form--notice form--suggestEmail'>
 7          Did you mean <span>{{ mailCheckedEmail }}</span>?
 8        </span>
 9    </div>
10  </form>
11</template>
12
13<script>
14export default {
15
16  data: {
17    email: "",
18    mailCheckedEmail: undefined
19  },
20
21  methods: {
22    verifyEmail: function () {
23
24      let self = this;
25
26      Mailcheck.run({
27        email: self.email,
28        suggested: function (suggestion) {
29          self.mailCheckedEmail = suggestion.full;
30        },
31        empty: function () { // nothing wrong with the email }
32      });
33
34    }
35  }
36}
37</script>

现在,当用户完成键入他们的电子邮件地址时,如果存在错误,底层范围应填充。

用邮件检查电子邮件取代错误的电子邮件

如果用户的电子邮件出现错误,Mailcheck将为您提供正确的电子邮件,然后您可以进入并在纠正的电子邮件地址设置一个点击事件,以便在输入中快速更换旧的。

1<span @click="setEmail">{{ mailCheckedEmail }}</span>

1methods: {
2  setEmail: function () {
3    this.email = this.mailCheckedEmail;
4    this.mailCheckedEmail = undefined;
5  }
6}

参考

Mailcheck 是做一件事情做得很好的客户端库之一,您可以使用它做得更多,例如,Mailcheck 会返回一个被纠正的电子邮件分成部分(电子邮件名称、域名和完整电子邮件地址)的对象,而不是一个大字符串。

请确保您查看 GitHub 存储库以获取更多信息和文档。