blocks|key|207632|text|在HTML5中，您可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|207633|<form>
<input+type="email"+placeholder="Enter+your+email">
<input+type="submit"+value="Submit">
</form>|code-block|syntax|javascript|207634|当用户按下submit时，它会自动显示错误消息，如下所示：|207635|​|207636|📷|atomic|offset|length|207637|207638|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/af553032da63c3d299431ab1b4981749.png|imageAlt^0|0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|11|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|12|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|13|8|@]|9|@$N|14|O|15|1|16]]|A|$]]|$1|P|3|J|5|6|7|17|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X|Y|-4]]]]

<p>In HTML5 you can do like this:</p>

<pre><code>&lt;form&gt;
&lt;input type="email" placeholder="Enter your email"&gt;
&lt;input type="submit" value="Submit"&gt;
&lt;/form&gt;
</code></pre>

<p>And when the user press submit, it automatically shows an error message like:</p>

<p><img src="https://i.stack.imgur.com/CbfIO.png" alt="Error Message"></p>


blocks|key|207712|text|www.w3.org站点的input+type=email页面指出，电子邮件地址是与以下正则表达式匹配的任何字符串：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|207713|/%5E[a-zA-Z0-9.!#$%25&’*%2B/=?%5E_`{%7C}~-]%2B@[a-zA-Z0-9-]%2B(?:\.[a-zA-Z0-9-]%2B)*$/|code-block|syntax|javascript|207714|使用required属性和pattern属性要求该值与正则表达式模式匹配。|207715|<input
++++type="text"
++++pattern="/%5E[a-zA-Z0-9.!#$%25&’*%2B/=?%5E_`{%7C}~-]%2B@[a-zA-Z0-9-]%2B(?:\.[a-zA-Z0-9-]%2B)*$/"
++++required
>|207716|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3.org/|1|https://www.w3.org/TR/html5/sec-forms.html#email-state-typeemail^0|D|G|0|A|0|D|G|1|0|0|2|8|D|7|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]|$9|14|A|15|1|16]]|E|$]]|$1|F|3|G|5|H|7|17|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|18|8|@$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|1D|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]|W|$5|R|S|T|E|$U|X]]]]

<p>The <a href="https://www.w3.org/TR/html5/sec-forms.html#email-state-typeemail" rel="noreferrer"><code>input type=email</code></a> page of the <a href="https://www.w3.org/" rel="noreferrer">www.w3.org</a> site notes that an email address is any string which matches the following regular expression:</p>

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

<p>Use the <code>required</code> attribute and a <code>pattern</code> attribute to require the value to match the regex pattern.</p>

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


blocks|key|207787|text|将[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}用于somemail@email.com+/+somemail@email.com.vn|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|207788|entityMap^0|1|1F|1I|I|23|L|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

<p>Using <code>[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}</code> for <code>somemail@email.com</code> / <code>somemail@email.com.vn</code></p>


blocks|key|4713916|text|document.getElementById("email").validity.valid|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4713917|当字段为空或有效时，似乎为真。这还有一些其他有趣的标志：|unstyled|4713918|​|4713919|📷|atomic|offset|length|4713920|4713921|在Chrome上测试过。|4713922|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/6edc19d3ca0593cee9a21040a82b4838.png|imageAlt^0|0|0|0|0|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|11|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|12|8|@]|9|@$L|13|M|14|1|15]]|A|$]]|$1|N|3|H|5|F|7|16|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|17|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|F|7|18|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X|Y|-4]]]]

<pre><code>document.getElementById("email").validity.valid
</code></pre>

<p>seems to be true when field is either empty or valid. This also has some other interesting flags:</p>

<p><a href="https://i.stack.imgur.com/P0884.png" rel="noreferrer"><img src="https://i.stack.imgur.com/P0884.png" alt="enter image description here"></a></p>

<p>Tested in Chrome.</p>


blocks|key|4713800|text|以下是我在所有表单电子邮件输入中使用的示例。此示例为ASP.NET，但适用于任何：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4713801|<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!#$%25&'*%2B\/=?%5E_`{%7C}~.-]%2B@[a-zA-Z0-9-]%2B(\.[a-zA-Z0-9-]%2B)*"+>
</asp:TextBox>|code-block|syntax|javascript|4713802|当不需要时，HTML5仍然使用该模式进行验证。还没有找到一个是假阳性的。|4713803|这将呈现为以下HTML：|4713804|<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!#$%25&amp;'*%2B\/=?%5E_`{%7C}~.-]%2B@[a-zA-Z0-9-]%2B(\.[a-zA-Z0-9-]%2B)*">|4713805|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Here is the example I use for all of my form email inputs. This example is ASP.NET, but applies to any: </p>

<pre><code>&lt;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!#$%&amp;'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*" &gt;
&lt;/asp:TextBox&gt;
</code></pre>

<p>HTML5 still validates using the pattern when not required. Haven't found one yet that was a false positive. </p>

<p>This renders as the following HTML:</p>

<pre><code>&lt;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;amp;'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*"&gt;
</code></pre>


blocks|key|4713757|text|我知道你不想要Javascript解决方案，但是有些事情，比如定制的验证消息，根据我的经验，只能使用JS来完成。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4713758|此外，通过使用JS，您可以动态地将验证添加到站点中所有类型为email的输入字段，而不必修改每个单独的输入字段。|4713759|var+validations+={
++++email:+[/%5E([a-zA-Z0-9_.%2B-])%2B\@(([a-zA-Z0-9-])%2B\.)%2B([a-zA-Z0-9]{2,4})%2B$/,+'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('');
++++++++}
++++});
})|code-block|syntax|javascript|4713760|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I know you are not after the Javascript solution however there are some things such as the customized validation message that, from my experience, can only be done using JS.</p>

<p>Also, by using JS, you can dynamically add the validation to all input fields of type email within your site instead of having to modify every single input field.</p>

<pre><code>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('');
        }
    });
})
</code></pre>


blocks|key|4714067|text|参加聚会有点晚了，但这个正则表达式帮助我在客户端验证了电子邮件类型的输入。不过，我们也应该始终在服务器端进行验证。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4714068|<input+type="email"+pattern="%5E([a-zA-Z0-9_\-\.]%2B)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)%7C(([a-zA-Z0-9\-]%2B\.)%2B))([a-zA-Z]{2,4}%7C[0-9]{1,3})(\]?)$">|code-block|syntax|javascript|4714069|您可以找到更多各种here的正则表达式。|offset|length|4714070|entityMap|0|LINK|mutability|MUTABLE|url|http://regexlib.com/Search.aspx?k=email&AspxAutoDetectCookieSupport=1^0|0|0|9|4|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>A bit late for the party, but this regular expression helped me to validate email type input in the client side. Though, we should always do verification in server side also.</p>

<pre><code>&lt;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})(\]?)$"&gt;
</code></pre>

<p>You can find more regex of all kinds <a href="http://regexlib.com/Search.aspx?k=email&amp;AspxAutoDetectCookieSupport=1" rel="noreferrer">here</a>.</p>


blocks|key|4714021|text|您也可以遵循此模式|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4714022|<form+action="/action_page.php">
++E-mail:+<input+type="email"+name="email"+pattern="[a-z0-9._%25%2B-]%2B@[a-z0-9.-]%2B\.[a-z]{2,}$">
++<input+type="submit">
</form>|code-block|syntax|javascript|4714023|参考：In+W3Schools|offset|length|4714024|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_pattern4^0|0|0|3|C|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>You can follow this pattern also</p>

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

<p>Ref : <a href="https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_pattern4" rel="nofollow noreferrer">In W3Schools</a></p>


blocks|key|207934|text|使用HTML5，只需使输入的电子邮件如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|207935|​|207936|<input+type="email"/>|code-block|syntax|javascript|207937|207938|当用户将鼠标悬停在输入框上时，他们将看到一个工具提示，指示他们输入有效的电子邮件。然而，Bootstrap表单有一个更好的工具提示消息，告诉用户输入电子邮件地址，并在输入的值与有效电子邮件不匹配时弹出。|207939|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Using HTML 5,Just make the input email like : </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="email"/&gt;</code></pre>
</div>
</div>
</p>

<p>When the user hovers over the input box, they will a tooltip instructing them to enter a valid email.
However, Bootstrap forms have a much better Tooltip message to tell the user to enter an email address and it pops up the moment the value entered does not match a valid email.</p>


blocks|key|4714104|text|According+to+MDN，这个RegExp可以验证电子邮件，因为符合规范的电子邮件应该匹配它。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4714105|/%5E[a-zA-Z0-9.!#$%25&'*%2B\/=?%5E_`{%7C}~-]%2B@[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])?)*$/|code-block|syntax|javascript|4714106|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/enUS/docs/Web/HTML/Element/input/email#Basic_validation^0|0|G|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p><a href="https://developer.mozilla.org/enUS/docs/Web/HTML/Element/input/email#Basic_validation" rel="nofollow noreferrer">According to MDN</a>, this RegExp is ok to validate emails, as emails that meet specifications should match it.</p>

<pre class="lang-regex prettyprint-override"><code>/^[a-zA-Z0-9.!#$%&amp;'*+\/=?^_`{|}~-]+@[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])?)*$/
</code></pre>


blocks|key|207675|text|仅仅使用HTML5属性"pattern“很难正确验证电子邮件。如果你不使用“模式”，某人@将被处理。这是无效的电子邮件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|207676|使用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或类似格式“。|offset|length|style|CODE|207677|但是，如果使用它，它将不允许someone@email.com进行验证。因此，就简单地使用HTML5来验证电子邮件地址而言，我们还没有完全理解。要完成此操作，您可以使用如下代码：|207678|<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>|code-block|syntax|javascript|207679|或者：|207680|<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>|207681|但是，我不知道如何使用HTML5模式属性验证两个或所有版本的电子邮件地址。|207682|entityMap^0|0|2|1Z|27|H|32|K|4C|2H|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@$D|Y|E|Z|F|G]|$D|10|E|11|F|G]|$D|12|E|13|F|G]|$D|14|E|15|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|16|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|17|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|19|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|1A|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|V|$]]

<p>It is very difficult to validate Email correctly simply using HTML5 attribute "pattern".  If you do not use a "pattern" someone@ will be processed. which is NOT valid email.</p>

<p>Using <code>pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"</code> will require the format to be <code>someone@email.com</code> however if the sender has a format like <code>someone@email.net.au</code> (or similar) will not be validated to fix this you could put <code>pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"</code> this will validate ".com.au or .net.au or alike.  </p>

<p>However using this, it will not permit someone@email.com to validate.  So as far as simply using HTML5 to validate email addresses is still not totally with us. To Complete this you would use something like this:</p>

<pre><code>&lt;form&gt;
&lt;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"&gt;
&lt;br&gt;
&lt;input type="submit" value="Submit The Form"&gt;
&lt;/form&gt;
</code></pre>

<p>or:</p>

<pre><code>&lt;form&gt;
&lt;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"&gt;
&lt;br&gt;
&lt;input type="submit" value="Submit The Form"&gt;
&lt;/form&gt;
</code></pre>

<p>However, I do not know how to validate both or all versions of email addresses using HTML5 pattern attribute.</p>


<p>It is said "With HTML5, we need no more js or a server side code to check if the user's input is a valid email or url address"</p>

<p>How can I validate email after a user enter? and without JS how to display a message if the user enter a wrong form of his/her email address.</p>

<pre><code>&lt;input type="email" pattern="[^ @]*@[^ @]*" placeholder="Enter your email"&gt;
&lt;input type="submit" value="Submit"&gt;
</code></pre>


HTML5 Email Validation

服务器

HTML5

据说“有了HTML5，我们就不再需要js或服务器端代码来检查用户的输入是否是有效的电子邮件或url地址”。如何在用户输入后验证电子邮件？如果没有JS，如果用户输入了错误的电子邮件地址格式，如何显示消息。<input type="email" pattern="[^ @]*@[^ @]*" placeholder="Enter your email"><input type="submit" val

问HTML5电子邮件验证
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5电子邮件验证EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5电子邮件验证
EN