夏日博客

A-A+

jquery验证手机号码及格式化的例子

2016年01月12日 前端设计 暂无评论 阅读 7 views 次

验证手机号码不管是用js还是jquery其实操作起来都是非常的简单的了，那么如果还需要格式化要如何做到呢，这里小编来为各位介绍一篇验证手机号码jquery代码。

我们常用的验证手机号码的js

--jquery手机号验证

  1. //<a href="/tags.php/%CA%D6%BB%FA%D1%E9%D6%A4/" target="_blank">手机验证</a>  
  2.    
  3. function isMobil(s)   
  4.    
  5. {   
  6.    
  7. //var reg=/^((13[0-9])|(15[^4,\D])|(18[0,5-9]))\d{8}$/;   
  8.    
  9. var reg=/^1\d{10}$/;  
  10.    
  11. if (!reg.exec(s)) {  
  12.    
  13.  return false;   
  14.    
  15. }  
  16.    
  17. return true;   
  18.    
  19. }  

这里我们来简单罗列下需要注意的问题吧：

* input输入框，只能输入数字；

* 输入过程中下方同步显示所输入的内容；

* 判断输入手机号是否格式正确；

* 判断手机归属地；

1、页面结构

  1. <!DOCTYPE html>  
  2.    
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4.    
  5. <head>  
  6.    
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  8.    
  9.     <title>suchso网站提供 </title>  
  10.    
  11.     <style>  
  12.    
  13.         .phone_num {  
  14.    
  15.         position: relative;     
  16.    
  17.         height: 50px;  
  18.    
  19.         line-height: 50px;  
  20.    
  21.         margin-bottom: 30px;  
  22.    
  23. }  
  24.    
  25. .phone_num input {  
  26.    
  27.         width: 300px;   
  28.    
  29.         height: 30px;  
  30.    
  31.         padding: 5px 5px;  
  32.    
  33.         float: left;  
  34.    
  35. }  
  36.    
  37. .phone_num span {  
  38.    
  39.         display: inline-block;  
  40.    
  41.         margin-left: 30px;  
  42.    
  43. }  
  44.    
  45. .show_phone_num {  
  46.    
  47.         width: 500px;  
  48.    
  49.         height: 40px;  
  50.    
  51.         line-height: 40px;  
  52.    
  53.         position: absolute;  
  54.    
  55.         left: 75px;  
  56.    
  57.         color: #ff5205;  
  58.    
  59.         font-size: 18px;  
  60.    
  61.         font-weight: bold;  
  62.    
  63.         bottom: -30px;  
  64.    
  65. }  
  66.    
  67. .phone_from_where {  
  68.    
  69.         display: inline-block;  
  70.    
  71.         font-size: 14px;  
  72.    
  73.         color: #000;  
  74.    
  75.         height: 30px;  
  76.    
  77.         line-height: 30px;  
  78.    
  79.         margin-left: 60px;  
  80.    
  81.         font-weight: 100;  
  82.    
  83.         position: relative;  
  84.    
  85. }  
  86.    
  87.     </style>  
  88.    
  89. </head>  
  90.    
  91. <body>  
  92.    
  93.     <div class="phone_num">  
  94.    
  95.                 <label class="float_left">手机号码:</label>  
  96.    
  97.                     <input type="text"   
  98.    
  99.                     onkeyup="<a href="/js_a/js.html" target="_blank">javascript</a>:ckphone(this)"  
  100.    
  101.                              onafterpaste="javascript:ckphone(this)"   
  102.    
  103.                              onchange="javascript:ckphonelast(this)"   
  104.    
  105.                              onblur="javascript:ckphonelast(this)" />  
  106.    
  107.                     <div class="show_phone_num">  
  108.    
  109.                       <span id="phone_showtip"><!--155 77777 6666--></span>   
  110.    
  111.                       <span class="phone_from_where" id="phone_belong">  
  112.    
  113.                         <!--(广西 中国联通)-->  
  114.    
  115.                       </span>  
  116.    
  117.                     </div>  
  118.    
  119. </div>  
  120.    
  121.     <script src="http://ap<a href="/fw/photo.html" target="_blank">ps</a>.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>  
  122.    
  123. </body>  
  124.   
  125. <script src="test.js"></script>  
  126.    
  127. </html>  

对手机号的操作,通过结构代码我们可以简单发现我们相应的操作,比方说录入代码或者粘贴代码等等时.

  1. function ckphonelast(n){  
  2.     if(n.value.length!=11){  
  3.         $('#phone_showtip').html("请输入正确的手机号");  
  4.     }else{  
  5.         var partten = /^1[3,5,8]\d{9}$/;   
  6.         if(partten.test(n.value)){  
  7.                 ckbelong(n.value);  
  8.         }else{//正则判定不是手机号  
  9.             $('#phone_showtip').html("请输入正确的手机号");  
  10.         }  
  11.     }  
  12. }  
  13. function ckphone(n){  
  14.     $('#phone_showtip').html("");  
  15.     $("#phone_belong").html("");     
  16.     var ck=false;  
  17.     n.value=n.value.replace(/\D/g,'');  
  18.     if(n.value.length>11){       //只能录入11位数字  
  19.         n.value=n.value.<a href="/tags.php/substr/" target="_blank">substr</a>ing(0,11);  
  20.     }  
  21.     if(n.value.length<=3){      //为了显示时前面的表格  
  22.         $('#phone_showtip').html(n.value);  
  23.     }  
  24.     if(n.value.length>3){  
  25.         $('#phone_showtip').html(n.value.substring(0,3)).append(" ").append(n.value.substring(3));  
  26.     }  
  27.     if(n.value.length>7){  
  28.         $('#phone_showtip').html(n.value.substring(0,3)).append(" ").append(n.value.substring(3,7)).append(" ").append(n.value.substring(7));  
  29.     }  
  30.     if(n.value.length==11){  
  31.         var partten = /^1[3,5,8]\d{9}$/;   
  32.         if(partten.test(n.value)){  
  33.                 ck=true;  
  34.         }else{//正则判定不是手机号  
  35.             $('#phone_showtip').html("请输入正确的手机号");  
  36.         }  
  37.     }  
  38.     if(ck){  
  39.         ckbelong(n.value);  
  40.     }  
  41. }  
标签：

给我留言