HTML5メール検証

「HTML5を使用すると、ユーザーの入力が有効な電子メールまたはURLアドレスであるかどうかを確認するために、これ以上jsまたはサーバー側コードは必要ありません。」

ユーザーの入力後にメールを検証するにはどうすればよいですか？JSを使用せずに、ユーザーが自分のメールアドレスの間違ったフォームを入力した場合にメッセージを表示する方法。

<input type="email" pattern="[^ @]*@[^ @]*" placeholder="Enter your email">
<input type="submit" value="Submit">

HTML5では、次のようにできます。

<form>
<input type="email" placeholder="Enter your email">
<input type="submit" value="Submit">
</form>

ユーザーが送信を押すと、次のようなエラーメッセージが自動的に表示されます。

www.w3.orgサイトのinput type=emailページには、電子メールアドレスが次の正規表現に一致する任意の文字列であることが記載されています。

/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/

required属性と属性を使用してpattern、正規表現パターンに一致する値を要求します。

<input
    type="text"
    pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/"
    required
>

使用[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}のためにsomemail@email.com/somemail@email.com.vn

document.getElementById("email").validity.valid

フィールドが空または有効な場合はtrueのようです。これには他にも興味深いフラグがあります。

Chromeでテスト済み。

これが、フォームのすべての電子メール入力に使用する例です。この例はASP.NETですが、次のものに適用されます。

<asp:TextBox runat="server" class="form-control" placeholder="Contact's email" 
    name="contact_email" ID="contact_email" title="Contact's email (format: xxx@xxx.xxx)" 
    type="email" TextMode="Email" validate="required:true"
    pattern="[a-zA-Z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*" >
</asp:TextBox>

HTML5は、不要な場合でもパターンを使用して検証します。まだ偽陽性だったものを見つけていません。

これは、次のHTMLとしてレンダリングされます。

<input class="form-control" placeholder="Contact's email" 
    name="contact_email" id="contact_email" type="email" 
    title="Contact's email (format: xxx@xxx.xxx)" 
    pattern="[a-zA-Z0-9!#$%&amp;'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*">

私はあなたがJavascriptソリューションの後にではないことを知っていますが、私の経験から、JSを使用してのみ実行できるカスタマイズされた検証メッセージなどのいくつかのものがあります。

また、JSを使用すると、すべての入力フィールドを変更する必要がなく、サイト内のタイプがemailのすべての入力フィールドに検証を動的に追加できます。

var validations ={
    email: [/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/, 'Please enter a valid email address']
};
$(document).ready(function(){
    // Check all the input fields of type email. This function will handle all the email addresses validations
    $("input[type=email]").change( function(){
        // Set the regular expression to validate the email 
        validation = new RegExp(validations['email'][0]);
        // validate the email value against the regular expression
        if (!validation.test(this.value)){
            // If the validation fails then we show the custom error message
            this.setCustomValidity(validations['email'][1]);
            return false;
        } else {
            // This is really important. If the validation is successful you need to reset the custom error message
            this.setCustomValidity('');
        }
    });
})

パーティーには少し遅れましたが、この正規表現はクライアント側での電子メールタイプの入力を検証するのに役立ちました。ただし、常にサーバー側でも検証を行う必要があります。

<input type="email" pattern="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$">

ここでは、あらゆる種類の正規表現を見つけることができます。

TL; DR：唯一の100％正しい方法は、入力された電子メールアドレスのどこかに@記号があるかどうかを確認し、指定された電子メールアドレスに検証メッセージを投稿することです。メールメッセージの検証手順を実行できる場合、入力したメールアドレスは正しいものです。

長い答え：

David Gilbertsonはこの数年前に次のように書いています。

私たちが尋ねる必要がある2つの質問があります：

1. ユーザーは、このフィールドにメールアドレスを入力することになっていることを理解しましたか？
2. ユーザーは自分のメールアドレスをこのフィールドに正しく入力しましたか？

「電子メール」というラベルの付いたうまくレイアウトされたフォームがあり、ユーザーがどこかに「@」記号を入力した場合、ユーザーが電子メールアドレスを入力することになっていると理解したと言っても安全です。簡単です。

次に、電子メールアドレスを正しく入力したかどうかを確認するために検証を行います。

ありえない。

[...]

入力ミスをすると間違いなくメールアドレスが不正確になりますが、メールアドレスが無効になる可能性があります。

[...]

メールアドレスが「有効」である場合、解決しようとしても意味がありません。ユーザーは、無効なアドレスを入力するよりも、間違った有効なメールアドレスを入力する可能性がはるかに高くなります。

つまり、どのような種類の文字列ベースの検証でも、構文が無効かどうかしか確認できないことに注意することが重要です。ユーザーが実際に電子メールを表示できるかどうかを確認することはできません（たとえば、ユーザーが既に資格情報を入力したか、他の人のアドレスを入力したか、特定のユースケースの個人の電子メールアドレスの代わりに仕事用の電子メールを入力したため）。あなたが実際に求めている質問は、「このメールは構文的に有効ですか」ではなく、「指定されたメールアドレスを使用してユーザーと通信できますか」という頻度です。「を含む@」よりも文字列を検証すると、前の質問に答えようとしていることになります。個人的に、私はいつも後者の質問だけに興味があります。

さらに、構文的または政治的に無効である可能性がある一部の電子メールアドレスは機能します。たとえばpostmaster@ai、TLDにMXレコードを含めないようにしても、は技術的に機能します。WHATWGメーリングリスト（そもそもHTML5が設計されている）での電子メール検証に関する説明も参照してください。

HTML 5を使用して、入力メールを次のようにします。

<input type="email"/>

ユーザーが入力ボックスにカーソルを合わせると、有効な電子メールを入力するように指示するツールチップが表示されます。ただし、Bootstrapフォームには、ユーザーに電子メールアドレスを入力するように通知するためのより優れたツールチップメッセージがあり、入力した値が有効な電子メールと一致しないときにポップアップ表示されます。

このパターンにも従うことができます

<form action="/action_page.php">
  E-mail: <input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
  <input type="submit">
</form>

参照：W3Schools内

MDNによると、このRegExpは、仕様を満たす電子メールが一致する必要があるため、電子メールの検証に問題がないとしています。

/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}
  [a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

HTML5の属性「パターン」を使用するだけでメールを正しく検証することは非常に困難です。「パターン」を使用しない場合、someone @が処理されます。これは有効なメールではありません。

を使用pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"するにはフォーマットが必要ですがsomeone@email.com、送信者がsomeone@email.net.au（または類似の）のようなフォーマットを持っている場合、これを修正するために検証できません。pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"これを配置して「.com.auまたは.net.auなどを検証ます。

ただし、これを使用すると、someone @ email.comによる検証は許可されません。したがって、HTML5を使用して電子メールアドレスを検証するだけでは、まだ完全には私たちにはありません。これを完了するには、次のようなものを使用します。

<form>
<input id="email" type="text" name="email" pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" required placeholder="Enter you Email">
<br>
<input type="submit" value="Submit The Form">
</form>

または：

<form>
<input id="email" type="text" name="email" pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" required placeholder="Enter you Email">
<br>
<input type="submit" value="Submit The Form">
</form>

ただし、HTML5パターン属性を使用してメールアドレスの両方またはすべてのバージョンを検証する方法がわかりません。