美文网首页
最简单的电话号码、邮箱验证(样式布局请忽略,重点已加粗,3行))

最简单的电话号码、邮箱验证(样式布局请忽略,重点已加粗,3行))

作者: 陆月天 | 来源:发表于2019-08-08 14:34 被阅读0次

    <style>

    button{

      background-color: aqua;

    }

    div{

      margin-top: 50px;

    }

    .main{

    width:80%;

    top:0;left:0;right:0;bottom:0;

    margin: auto;

    padding-top: 40px;

    }

    </style>

    <div class = "main">

    <h3>==》简单的正则表达式面试题《==</h3>

    <h5>查看源码请使用"检查" </h5>

      <div id = "div1">

      <p>  1. 每三个数添加一个小数点 </p>

      <p style="color:burlywood">科学计数法表示方式</p>

      <p  style = "color:chartreuse">如:1000000000 --> 100,000,000</p>

          <input  type ="text" id = "num" value=""/>

          <button onclick="change()">转换科学计数法</button>

          <span id ="result" style="color:green"></span>

      </div>

      <script>

    function change(){

      var  str  = document.getElementById("num").value;

      var reg = /(?=(\B)(\d{3})+$)/g;

      var result = str.replace(reg,",");

      var add = document.getElementById("result");

      add.innerHTML ="结果:"+result+".00";

    }

    </script>

    <div id = "div2">

      <p>2. 检查电话号码</p>

      <p style ="color:seagreen">请输入您的手机号码:

        <input class="phone" type="text"  />

        <button onclick = "check()">验证</button>

      </p>

    </div>

    <script>

    var div = document.getElementById("div2");

    var  p = document.createElement("p");

          div.append(p);

    function check(){

        var phone = document.getElementsByClassName("phone")[0].value;

        var reg = /(^[1][3,5,6,9][0-9]{9}$)/;

        var result  = reg.exec(phone);

        if(phone == null || phone == ""){

          p.style.color = "rgb(254 163  87)";

          p.innerHTML = "您的手机号码为空";

        }else{

          if( result == null ){

                p.style.color ="red";

                p.innerHTML = "手机格式有误,请重新输入";

          }else{

              p.style.color ="rgb(18 183 245)";

              p.innerHTML = "手机格式正确";

          }

        }

    }

    </script>

      <div id ="emaildiv">

        <p> 3. 邮箱验证</p>

        输入您163的邮箱:<input type="text" id = "email" /> <button id = "btnemail" onclick = "checkEmail()" > 检验邮箱格式</button>

        </div>

        <script>

            var div = document.getElementById("emaildiv");

            var i  = document.createElement("i");

            div.append(i);

            function checkEmail(){

                var email = document.getElementById("email").value +"";

          var reg  = /(^[A-z0-9][A-z0-9_-]+[@][a-z0-9]{2,}[.][com,cn]{2,3}$)/g;

                var result = reg.test(email);

                if(email == null || email ==""){

                    i.style.color="rgb(104 33 122)";

                    i.innerHTML = "邮箱不能为空";

                  }else{

                      if(result){

                        i.style.color = "rgb(37 177 243)";

                        i.innerHTML = "邮箱正确";

                      }else{

                        i.style.color = "rgb(236 49 59)";

                        i.innerHTML = "邮箱格式不正确正确";

                      }

                  }

            }

        </script>

    </div>

    相关文章

      网友评论

          本文标题:最简单的电话号码、邮箱验证(样式布局请忽略,重点已加粗,3行))

          本文链接:https://www.haomeiwen.com/subject/uidxjctx.html