web-dev-qa-db-ja.com

HTML5電子メール入力パターン属性

1つのメール入力、1つのチェックボックス入力、1つの送信入力を含むhtml5フォームを作成しようとしています。メールの入力にパターン属性を使用しようとしていますが、この属性に何を配置するのかわかりません。 JavaScriptパターンの生成に一致する必要がある正規表現を使用することになっていることは知っていますが、これを行う方法はわかりません。

この属性を取得しようとしているのは、電子メールに1つの@と少なくとも1つ以上のドットが含まれていることを確認し、可能であれば@の後のアドレスが実際のアドレスかどうかを確認することです。この属性を使用してこれを実行できない場合は、JavaScriptの使用を検討しますが、1つの@と1つ以上のドットを確認するために、パターン属性を必ず使用します。

パターン属性は以下をチェックする必要があります：

  1. 唯一 @
  2. 1つ以上のドット
  3. 可能であれば、@の後のアドレスが有効なアドレスであるかどうかを確認します

これに代わるものはJavaScriptを使用することですが、他のすべての条件ではJavaScriptを使用したくない

html5html-emailemail-validationhtml-input
39
Colton

これは二重の問題です（World Wide Webの世界の多くと同様）。

ブラウザがhtml5をサポートしているかどうかを評価する必要があります（Modernizrを使用してそれを行います）。この場合、通常のフォームがある場合はブラウザが代わりに作業を行いますが、ajax/jsonが必要な場合（多くの場合）、とにかく手動検証を実行する必要があります。

..だから、私の提案は、送信する前にいつでも正規表現を使用して評価することです。使用する式は次のとおりです。

var email = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/;

これは http://www.regular-expressions.info/ から取得されます。これは理解して習得するのが難しい世界なので、このページを注意深く読むことをお勧めします。

40
Alwin Kesler

上記のAlwin Keslersの回答を使用して、HTML5の電子メール入力にこの正確な問題がありました。ユーザーが最後に.somethingを持たなければならないように、HTML5の電子メール入力に正規表現を追加しました。

<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" />
60
Stephen

HTML5では、新しい「メール」タイプを使用できます。 http://www.w3.org/TR/html-markup/input.email.html

例えば：

<input type="email" id="email" />

ブラウザがHTML5を実装している場合、ユーザーがフィールドに有効なメールアドレスを入力したことを確認します。ブラウザがHTML5を実装していない場合、「テキスト」タイプのように扱われることに注意してください。

<input type="text" id="email" />
23
Anthony

残念ながら、B-Money以外のすべての提案はほとんどの場合無効です。

有効なメールは次のとおりです。

  • gü[email protected]（ドイツ語のウムラウト）
  • антон@россия.рф（ロシア語、рфは有効なドメインです）
  • 中国語および他の多くの言語（たとえば 国際メール およびリンクされた仕様を参照）。

検証を正しく行うには複雑さがあるため、非常に汎用的なソリューションを提案します。

<input type="text" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" title="Invalid email address" />

メールに「@」の前に少なくとも1文字（数字または別の「@」または空白を除く任意の文字）、「@」の後の少なくとも2文字（または別の「@」または空白を除く任意の文字）およびの間に。このパターンは、内部ネットワークで使用されることがあるlol @ companyのようなアドレスを受け入れません。ただし、必要に応じてこれを使用できます。

<input type="text" pattern="[^@\s]+@[^@\s]+" title="Invalid email address" />

どちらのパターンも、垂直タブ付きのメールなど、有効性の低いメールも受け入れます。しかし、私にとってはそれで十分です。とにかく、サーバー側でメールサーバーやpingドメインに接続しようとするような強力なチェックを行う必要があります。

ところで、私はangularディレクティブを作成しました（まだ十分にテストされていません）novalidateを使用し、DRY原則をサポートするための上記のパターンに基づいていない電子メール検証用：

.directive('isEmail', ['$compile', '$q', 't', function($compile, $q, t) {
    var EMAIL_PATTERN = '^[^@\\s]+@[^@\\s]+\\.[^@\\s]+$';
    var EMAIL_REGEXP = new RegExp(EMAIL_PATTERN, 'i');
    return {
        require: 'ngModel',
        link: function(scope, elem, attrs, ngModel){
            function validate(value) {
                var valid = angular.isUndefined(value)
                    || value.length === 0
                    || EMAIL_REGEXP.test(value);
                ngModel.$setValidity('email', valid);
                return valid ? value : undefined;
            }
            ngModel.$formatters.unshift(validate);
            ngModel.$parsers.unshift(validate);
            elem.attr('pattern', EMAIL_PATTERN);
            elem.attr('title', 'Invalid email address');
        }
    };
}])

使用法：

<input type="text" is-email />

B-Moneyのパターンは「@」で十分です。ただし、2つ以上の「@」とすべてのスペースは拒否されます。

22
Anton Bessonov

これは私が使用しているアプローチであり、必要に応じて変更できます。

^[\w]{1,}[\w.+-]{0,}@[\w-]{2,}([.][a-zA-Z]{2,}|[.][\w-]{2,}[.][a-zA-Z]{2,})$

説明：

  1. 電子メールアドレスが常にWordで始まることを確認する必要があります。

    ^ [\ w]

Wordは、任意の文字、数字、またはアンダースコアです。 [a-zA-Z0-9_]パターンを使用できますが、同じ結果が得られ、長くなります。

  1. 次に、このようなキャラクターが少なくとも1つ存在することを確認します。

    ^ [\ w]{1、}

  2. 次に、名前にワード、数字、または特殊文字を許可します。これにより、電子メールがドットで始まらないことを確認できますが、最初の位置以外にドットを含めることができます。

    ^ [\ w] {1、}[\ w。+-]

  3. そしてもちろん、電子メールアドレスには1文字の後に@を付けることができるため、このような文字を使用する必要はありません。

    ^ [\ w] {1、} [\ w。+-]{0、}

  4. 次に、必須の@文字が必要ですが、メール全体に1つしか入力できません。

    ^ [\ w] {1、} [\ w。+-] {0、}@

  5. @文字のすぐ後ろに、ドメイン名が必要です。ここで、必要な文字数と最小文字数を定義できます。ハイフン[\ w-]を含むすべてのWord文字を探して、そのうちの少なくとも2つが必要です{2、}。 t.coのようなドメインを許可する場合、この範囲から1文字を許可する必要があります{1 、}：

    ^ [\ w] {1、} [\ w。+-] {0、} @[\ w-] {2、}

  6. 次に、2つのケースに対処する必要があります。ドメイン名の後にドメイン拡張子が続くか、サブドメイン名の後にドメイン名の後に拡張子が続くかのいずれかです。たとえば、abc.com対abc.co.ukこれを機能させるには、（a | b）トークンを使用する必要があります。ここで、aは最初のケース、bは2番目のケース、|は論理ORを表します。最初のケースでは、ドメイン拡張子のみを扱いますが、ケースに関係なく常に存在するため、両方のケースに安全に追加できます。

    ^ [\ w] {1、} [\ w。+-] {0、} @ [\ w-] {2、}（[。] [a-zA-Z] {2、} | [。] [a-zA-Z] {2、}）

このパターンは、1つのドット文字に続けて文字が必要で、数字は不要であり、どちらの場合も少なくとも2つが必要であることを示しています。

  1. 2番目の場合、ドメイン拡張子の前にドメイン名を追加し、元のドメイン名をサブドメインにします。

    ^ [\ w] {1、} [\ w。+-] {0、} @ [\ w-] {2、}（[。] [a-zA-Z] {2、} |[。] [\ w-] {2、}[。] [a-zA-Z] {2、}）

ドメイン名は、ハイフンを含むWord文字で構成できますが、ここでも少なくとも2文字が必要です。

  1. 最後に、パターン全体の終わりをマークする必要があります。

    ^ [\ w] {1、} [\ w。+-] {0、} @ [\ w-] {2、}（[。] [a-zA-Z] {2、} | [。] [\w-] {2、} [。] [a-zA-Z] {2、}）$

  2. ここに移動して、電子メールがパターンに一致するかどうかをテストします。 https://regex101.com/r/374XLJ/1

7
Jan Zavrel
<input name="email" type="email" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{1,63}$" class="form-control" placeholder="Email*" id="email" required="">

これは、大文字を受け入れる上記のソリューションの修正版です。

6
Vikrant Shitole

次の正規表現を使用して、次の電子メールを満足させました。

[email protected] # Minimum three characters
[email protected] # Accepts Caps as well.
[email protected] # Accepts . before @

コード

<input type="email" pattern="[A-Za-z0-9._%+-]{3,}@[a-zA-Z]{3,}([.]{1}[a-zA-Z]{2,}|[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,})" />
4
Abibullah Rahamathulah

W3org仕様の上に構築されたもう1つのソリューション。
元の正規表現は w3org から取得されます。
この正規表現の最後の「*Lazy量指定子」は、「+1つ以上の数量詞」。
このようなパターンは仕様に完全に準拠していますが、1つの例外があります。「foo @ com 」

<input
    type="email" 
    pattern="[a-zA-Z0-9.!#$%&amp;’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+"
    title="[email protected]"
    placeholder="[email protected]"
    required>
3
Artem Bozhko

おそらくこのようなものが必要です。属性に注意してください：

  • 必須
  • type = email
  • オートフォーカス
  • パターン

<input type="email" value="" name="EMAIL" id="EMAIL" placeholder="[email protected]" autofocus required pattern="[^ @]*@[^ @]*" />

3
B-Money
<input type="email" name="email" id="email" value="" placeholder="Email" required />

ドキュメント http://www.w3.org/TR/html-markup/input.email.html

3
Ashley Stuart

2018年の回答を更新

ここに行く http://emailregex.com/

Javascript：

/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

2
imnickvaughn

電子メール標準に関するホワイトペーパーを書きたくない場合は、次の例を使用して、既知のCSS属性（text-transform：lowercase）を導入して問題を解決します。

<input type="email" name="email" id="email" pattern="[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\.[a-zA-Z]{2,4}" style="text-transform: lowercase" placeholder="enter email here ..." title="please enter a valid email" />
1
Manifest Man
^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$
0
Saurabh Chauhan

Chrome Html電子メール入力検証と同じ結果が得られる次の正規表現をテストしました。

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

このウェブサイトでテストできます： regex101

0
Yang Zhang