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

2019-08-08  本文已影响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>

上一篇下一篇

猜你喜欢

热点阅读