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|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>


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|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|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|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|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|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|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|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>


<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

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

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

问HTML5电子邮件验证
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5电子邮件验证EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5电子邮件验证
EN