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

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

インストール

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

  1. 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リポジトリを確認してください。