71

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

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

pattern 属性は、以下を確認する必要があります。

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

これに代わる方法は JavaScript を使用することですが、他のすべての条件では JavaScript を使用したくありません。

4

20 に答える 20

95

上記の Alwin Keslers の回答を使用して、HTML5 の電子メール入力でこの正確な問題が発生したため、ユーザーは最後に .something が必要になるため、HTML5 の電子メール入力に正規表現を追加しました。

<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" />
于 2013-12-09T00:16:20.240 に答える
63

これは二重の問題です (ワールド ワイド ウェブの世界では多くの問題です)。

ブラウザーが html5 をサポートしているかどうかを評価する必要があります (私はそれを行うために Modernizr を使用しています)。この場合、通常のフォームを使用している場合はブラウザーが処理を行いますが、ajax/json が必要な場合 (日常的なケースの多く) は、とにかく手動で検証を実行する必要があります。

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

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

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

于 2012-01-17T15:52:21.090 に答える
24

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

例えば：

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

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

<input type="text" id="email" />
于 2011-04-17T18:25:18.243 に答える
6

メール標準に関するホワイトペーパーを書きたくない場合は、次の例を使用して、よく知られている CSS 属性 ( text-transform : 小文字) を導入して問題を解決してください。

データが小文字の値としてサーバー側に到達しないようにする場合は、次のようにする必要があります。

<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 ..." required />

データを小文字の値としてサーバー側に到達させたい場合は、次のようにする必要があります。

  const emailElmtRegex = new RegExp('[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\.[a-zA-Z]{2,4}');
document.getElementById("entered").innerHTML = "";
document.getElementById("send").innerHTML = ""

function lower() {
    let emailElmt = document.getElementById("email");
    document.getElementById("entered").innerHTML = "Entered: " + emailElmt.value;
    emailElmt.value = emailElmt.value.toLowerCase();

    if (emailElmtRegex.test(emailElmt.value)) {
        document.getElementById("send").innerHTML = "Send: " + emailElmt.value;
    } else {
        document.getElementById("send").innerHTML = ""
    }
}
input[type=email]#email {
   "text-transform: lowercase
}
<!DOCTYPE html>
<html>
<body>
<h3>Client Side to Server Side - Simple Email validation!</h3>
<input type="email" name="email" id="email" pattern="[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\.[a-zA-Z]{2,4}" placeholder="enter email here ..." required oninput="lower()" />

<p id="entered">Entered:</p>
<p id="send">Send:</p>

</body>
</html>

于 2019-08-02T19:15:32.823 に答える
5

次の電子メールを満たすために、次の正規表現を使用しました。

abc@example.com # Minimum three characters
ABC.xyz@example.com # Accepts Caps as well.
abce.xyz@example.co.in # 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,})" />
于 2016-01-06T11:35:01.007 に答える
0

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

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

この Web サイトでテストできます: regex101

于 2016-05-18T06:36:24.137 に答える