mailcheck.jsを使用してVue.jsアプリのスペルミスのあるメールアドレスを減らします

投稿日: 2022-04-20 2022-10-12
タグ: Vue.js

電子メールアドレスの入力とキャプチャは、そこにあるすべてのWebアプリが処理する必要があるものです。サインアップフォーム、ログインフォームで適切なメールをキャプチャし、アプリで重要なアクションを実行する際の確認文字列としても使用します。したがって、ユーザーが自分の電子メールアドレスのつづりを間違えると、大きな影響を与える可能性があります。それはあなたが思っているよりも頻繁に起こります。幸いなことに、これらのシナリオで役立つ優れたライブラリがあります。 mailcheck.js.

Mailcheck は、1つのことをうまく行う小さなクライアント側ライブラリの1つです。メールのドメインのスペルが間違っているかどうか、および次のような既知のドメインとどの程度一致しているかをチェックします。 gmail.com, yahoo.com、またはあなたの古き良き仲間 aol.com. 次に、最も近い一致を提案します。

インストール

MailcheckはNPMからインストールする必要があります。

npm install mailcheck -—save

フォームの設定とBlurでの電子メールエラーの処理

私の提案は、電子メールフィールドにblurイベントを配置して、ユーザーが入力を完了した後をチェックして、優れたユーザーエクスペリエンスを実現し、すぐにフィードバックを提供することです。

Form.js

<template>
  <form>
    <div class='form--inputContainer is-field-withEmailSuggestion'>
      <input v-model="email" @blur="verifyEmail" placeholder="Email address" type='email'>
        <span v-if="mailCheckedEmail" class='form--notice form--suggestEmail'>
          Did you mean <span>{{ mailCheckedEmail }}</span>?
        </span>
    </div>
  </form>
</template>

<script>
export default {

  data: {
    email: "",
    mailCheckedEmail: undefined
  },

  methods: {
    verifyEmail: function () {

      let self = this;

      Mailcheck.run({
        email: self.email,
        suggested: function (suggestion) {
          self.mailCheckedEmail = suggestion.full;
        },
        empty: function () { // nothing wrong with the email }
      });

    }
  }
}
</script>

これで、ユーザーがメールアドレスの入力を完了すると、エラーが発生した場合に下部のスパンが入力されます。 Mailcheckはまた提供します empty 電子メールに問題がない場合のコールバック関数。

スペルミスのあるEメールをメールチェック済みのEメールに置き換える

ユーザーの電子メールにエラーがある場合、Mailcheckは正しいものを提供します。次に、修正された電子メールアドレスにアクセスしてクリックイベントを設定し、入力内の古いアドレスを新しいアドレスにすばやく置き換えることができます。

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

methods: {
  setEmail: function () {
    this.email = this.mailCheckedEmail;
    this.mailCheckedEmail = undefined;
  }
}

参照

Mailcheckは、「1つのことを実行してうまく実行する」クライアント側ライブラリの1つです。あなたがそれでできることはもっとたくさんあります。たとえば、Mailcheckは、修正された電子メールが1つの大きな文字列ではなく、部分（電子メール名、ドメイン、および完全な電子メールアドレス）に分割されたオブジェクトを返します。これは、電子メールアドレス全体ではなく、ドメイン名のみを強調表示するなど、修正された電子メールアドレスをユーザーに別の方法で提示する場合に役立ちます。

詳細とドキュメントについては、GitHubリポジトリを確認してください。

getdocs

13036