效验页面邮箱

最新推荐文章于 2022-04-03 15:30:06 发布

原创最新推荐文章于 2022-04-03 15:30:06 发布 · 697 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #邮箱效验页面

web前端专栏收录该内容

12 篇文章

订阅专栏

效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>效验meail</title>
</head>
<body>
   <br>
           <center>
               <form>

                   邮箱地址：<input name="meail_input_name" type = "text" id="meail_input_id" value="" placeholder="请输入正确的邮箱">
                   <input name="meail_check_name" type = "button"id="meail_check_id" value="效验邮箱" onclick="checkMeail()">
               </form>
           </center>
   </br>
</body>
<script type="text/javascript">
   function checkMeail(){
       var meailAddress=document.getElementById("meail_input_id").value;
       //长度
       var meailLength = meailAddress.length;
       //判断含有@，“.”
       var index1 = meailAddress.indexOf("@");
       var index2 = meailAddress.indexOf(".");
       var msg = "效验输入的邮箱号\n";
       msg += "@所在的索引：==："+index1;
       msg += "'.'所在的索引：==："+index2;
       msg +="邮箱地址："+meailAddress+"\n";
       msg +="验证邮箱地址的实例："
       if (index1==-1||index2==-1||index1<index2) {
           msg +="邮箱的基本要求:"+"\n";
           msg +="必须含有'@'和'.'+\n";
           msg +="'.'必须在'@'后面\n";
       }else{
           msg += "符合要求";
       };
       alert(msg);
   }

</script>
</html>