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