专栏首页编程微刊正则表达式同时验证手机和座机号码

正则表达式同时验证手机和座机号码

JS同时验证固话和手机号正则表达式,验证规则: 1:当input框没有填写号码的时候,input为空,可通过验证 2:当手机号码填写正确的时候,可通过验证 3:当座机号码填写正确的时候,可通过验证 如果不通过,则出现提示信息,提示输入正确的手机号码座机号码。

<!DOCTYPE HTML>
<html>

    <head>
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </head>

    <body>
        <input type="text" id="phone" ></input>
        <button type="button" class="btn blue" id="addBtn">保存</button>
         <!-- 弹框 -->
        <script src="https://cdn.bootcss.com/layer/2.2/layer.js"></script>
        <script src="https://cdn.bootcss.com/layer/2.2/extend/layer.ext.js"></script>
        <script type="text/javascript">
            $("#addBtn").on("click", function() {
                var $phone_num = $("#phone").val();
                  var reg01 = /^(0|86|17951)?(13[0-9]|15[012356789]|17[01678]|18[0-9]|14[57])[0-9]{8}$/;  
                  var reg02 = /^(0[0-9]{2,3}\-)([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/;
                  if(reg01.test($phone_num) || reg02.test($phone_num) || $("#phone").val()=="") {
                  console.log("手机号或座机号填写正确")                                  
                  } else {
                        layer.msg('请填写正确的号码', {
                            icon : 5,
                            time : 1000
                        });               
                   return;
                  }
            })
        </script>
    </body>

</html>

也可以这样写

<!DOCTYPE HTML>
<html>

    <head>
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </head>

    <body>
        <input type="text" id="phone" ></input>
        <button type="button" class="btn blue" id="addBtn">保存</button>
         <!-- 弹框 -->
        <script src="https://cdn.bootcss.com/layer/2.2/layer.js"></script>
        <script src="https://cdn.bootcss.com/layer/2.2/extend/layer.ext.js"></script>
        <script type="text/javascript">
            $("#addBtn").on("click", function() {
                var $phone_num = $("#phone").val();
                  var reg01 = /^(0|86|17951)?(13[0-9]|15[012356789]|17[01678]|18[0-9]|14[57])[0-9]{8}$/;  
                  var reg02 = /^(0[0-9]{2,3}\-)([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/;
                  if(!reg01.test($phone_num) && !reg02.test($phone_num) && !$("#phone").val()=="") {                 
                  layer.msg('请填写正确的号码', {
                            icon : 5,
                            time : 1000
                        }); 
                  } else {
                         console.log("手机号或座机号填写正确")               
                 
                  }
            })
        </script>
    </body>

</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 在jsp页面里面设置全局引用文件

    祈澈菇凉
  • 手机199开头的号码的正则验证

    以前的正则验证里面,如果是199开头或者166开头的手机号码就没有办法通过验证,会给这些用户带来一定的麻烦

    祈澈菇凉
  • Node.js自学笔记之回调函数

    祈澈菇凉
  • webpack实战——样式文件分离

    在之前篇章里面主要是对js的打包应用和处理,而打包方面另外一个重要工作就是样式处理。

    流眸
  • web前端之锋利的jQuery八:jQuery插件的使用(表单验证、表单提交)

    插件也称扩展,是一种遵循一定规范的应用程序接口编写出来的程序。 1.jQuery表单验证插件-Validation: 最常使用JavaScript的场合就是表...

    Java帮帮
  • 又到公司年会时,给公司写的年会抽奖程序!

    用户5997198
  • 唯一独角兽、单挑ebay、上市在即,日本版转转mercari如何把二手电商做大?

    无印良品、优衣库、柳井正……谈及零售,总是难以忽视日本这个国家所取得的成就,然而在电商领域日本却鲜有建树,韩国乐天、美国亚马逊是当地的主流平台。不过,最近又有一...

    罗超频道
  • oracle特殊符号去除问题

    最近在搞Oracle相关的工作,发现在Oracle中可以储存特殊符号的,但是把数据放到其他的数据库里面就不可以了,例如PG中,为了解决脏数据的问题,作者可是费了...

    小徐
  • python 堆和优先队列的使用

    python里面的堆是通过在列表中维护堆的性质实现的。这一点与C++中heap一系列的算法类似,底层是通过堆vector的维护获取堆的性质。 python堆...

    py3study
  • CDN到底能不能防止DDoS攻击呢?高防CDN是如何防ddos攻击呢?

    随着互联网的发展,用户在访问网站时对访问速度越来越重视,为了让不同地区的访客都能快速的浏览网站,CDN加速服务由此诞生。近些年,cdn技术发展的非常快速,之前几...

    用户7261497

扫码关注云+社区

领取腾讯云代金券