验证电子邮件格式是否正确

最新推荐文章于 2025-05-15 13:36:40 发布

原创最新推荐文章于 2025-05-15 13:36:40 发布 · 1.4w 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #javascript #电子邮件

javascript 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，该页面利用JavaScript进行电子邮件格式的验证。用户可以在文本框内输入电子邮件地址，并通过点击验证按钮来检查其格式的有效性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 实现步骤:

	1，新建HTML页面，在页面中添加文本框输入电子邮件

	2，在页面中添加检测按钮电子邮件格式是否正确

	3，为按钮绑定点击事件，添加事件处理程序。

	4，在事件处理程序中验证电子邮件格式。

	5，直到验证通过。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>验证用户输入的电子邮件格式是否正确</title>
   <script type="text/javascript">
       function YanZhen()
       {
           //获取文本元素的值
           var email = document.getElementById("email");
           //邮件格式
           reg = /^([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/gi;
           //非空验证
           if (email.value == "") {
               alert("请输入电子邮件");
               return false;
           }
           //格式验证
           else if (!reg.test(email.value)) {
               alert("邮件格式不正确，请重新输入!");
               return false;
           }
           else {
               alert("恭喜您" + email.value + "邮箱可使用!");
           }
       }
   </script>
</head>
<body>
    电子邮件：<input type="text" id="email" />
    <input type="button" value="验证" onclick="YanZhen()" />
</body>
</html>