124

「HTML5 では、ユーザーの入力が有効なメールアドレスまたは URL アドレスであるかどうかを確認するための js やサーバー側のコードはもう必要ありません」と言われています。

ユーザーが入力した後に電子メールを検証するにはどうすればよいですか? JS を使用しない場合、ユーザーが間違った形式のメール アドレスを入力した場合にメッセージを表示する方法。

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

13 に答える 13

134

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

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

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

エラーメッセージ

于 2013-10-26T10:56:23.040 に答える
20

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

于 2016-11-20T04:41:13.950 に答える
8

これは、フォームの電子メール入力のすべてに使用する例です。この例は 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-]+)*">
于 2016-05-19T07:04:02.507 に答える
0

HTML5 属性「パターン」を使用するだけでは、E メールを正しく検証することは非常に困難です。「パターン」を使用しない場合は、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 パターン属性を使用して、両方またはすべてのバージョンのメール アドレスを検証する方法がわかりません。

于 2014-03-26T08:57:25.833 に答える