提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

积跬步，聚小流------关于手机号，前端应该注意哪些

前端 关于 哪些 注意 应该 ------ 手机号
2023-09-27 14:25:13 时间

现代的网上商城中越来越多的開始使用手机注冊。方便，快捷，然后作为前端。也就不可避免的要在界面上碰到关于手机号的问题。今天小小总结一下该注意哪些问题，又该来怎样实现呢？

1、实现效果

先把自己当前做出来的效果传上来看下：



（备注：这里的手机号码是我随便输了一个。假设真有这个号码受到了骚扰，别怪我啊，噗噗...）

2、须要注意的问题

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

* input输入框，仅仅能输入数字；
* 输入过程中下方同步显示所输入的内容；
* 推断输入手机号是否格式正确；
* 推断手机归属地。

3、实现步骤


1、页面结构

<div class="phone_num">
                <label class="float_left">手机号码:</label>
                    <input type="text" 
                    onkeyup="javascript:ckphone(this)"
                             onafterpaste="javascript:ckphone(this)" 
                             onchange="javascript:ckphonelast(this)" 
                             onblur="javascript:ckphonelast(this)" />
                    <div class="show_phone_num">
                      <span id="phone_showtip"><!--155 77777 6666--></span> 
                      <span class="phone_from_where" id="phone_belong">
                        <!--(广西 中国联通)-->
                      </span>
                    </div>
</div>


2、样式


然后我们先假定存在默认的手机号和默认的手机归属地，获得上方的样式
.phone_num {
		position: relative;	
		height: 50px;
		line-height: 50px;
		margin-bottom: 30px;
}
.phone_num input {
		width: 300px;	
		height: 30px;
		padding: 5px 5px;
		float: left;
}
.phone_num span {
		display: inline-block;	
		margin-left: 30px;
}
.show_phone_num {
		width: 500px;
		height: 40px;
		line-height: 40px;
		position: absolute;
		left: 75px;
		color: #ff5205;
		font-size: 18px;
		font-weight: bold;
		bottom: -30px;
}
.phone_from_where {
		display: inline-block;	
		font-size: 14px;
		color: #000;
		height: 30px;
		line-height: 30px;
		margin-left: 60px;
		font-weight: 100;
		position: relative;
}


3、对手机号的操作


通过结构代码我们能够简单发现我们对应的操作，例如说录入代码或者粘贴代码等等时
function ckphonelast(n){
	if(n.value.length!=11){
		$('#phone_showtip').html("请输入正确的手机号");
	}else{
		var partten = /^1[3,5,8]\d{9}$/; 
		if(partten.test(n.value)){
				ckbelong(n.value);
		}else{//正则判定不是手机号
			$('#phone_showtip').html("请输入正确的手机号");
		}
	}
}
function ckphone(n){
	$('#phone_showtip').html("");
	$("#phone_belong").html("");   
	var ck=false;
	n.value=n.value.replace(/\D/g,'');
	if(n.value.length>11){       //仅仅能录入11位数字
		n.value=n.value.substring(0,11);
	}
	if(n.value.length<=3){      //为了显示时前面的表格
		$('#phone_showtip').html(n.value);
	}
	if(n.value.length>3){
		$('#phone_showtip').html(n.value.substring(0,3)).append(" ").append(n.value.substring(3));
	}
	if(n.value.length>7){
		$('#phone_showtip').html(n.value.substring(0,3)).append(" ").append(n.value.substring(3,7)).append(" ").append(n.value.substring(7));
	}
	if(n.value.length==11){
		var partten = /^1[3,5,8]\d{9}$/; 
		if(partten.test(n.value)){
				ck=true;
		}else{//正则判定不是手机号
			$('#phone_showtip').html("请输入正确的手机号");
		}
	}
	if(ck){
		ckbelong(n.value);
	}
}
这里简单解释下以上代码：
首先：用正則表達式来获取仅仅能录入数字的时候，我们一般是这样做的：
 <input type="text" 
           onkeyup="this.value=this.value.replace(/\D/g,'')" 
           onafterpaste="this.value=this.value.replace(/\D/g,'')" />
而在这里我们仅仅是将this对象直接传递过来，然后进行操作。

这样我们已经保证录入数据都为数字，我们就完毕了第一步，然后进行第二步操作，同步录入信息。

我们首先观察录入信息和同步的显示的不同点，显示的时候是以3/4/4的格式进行显示的，中间以空格进行间隔，这样我们就要在操作的同一时候，在对应的位置加入空格。
第三：我们通过正則表達式来判定手机号格式是否正确，以保证你录入的数字是一个手机号。而不是你的银行卡password。

最后，我在这里利用淘宝的接口来判定手机的归属地，当然假设真正用到项目中肯定要调用自己的接口。只是仅仅用来显示的话，这也无可厚非啦。

function ckbelong(phone){
	$.ajax({
         type: "get",
         url: 'http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?
tel='+phone,
         dataType: "jsonp",
	 jsonp: "callback",
         success: function(n){
		$("#phone_belong").html(data.province+" "+data.catName);
         },
         error:function (data){   
               $("#phone_belong").html("该手机号存在问题");   
         }
   });
}
我们来简单看下它的返回值都是什么呢？



这样我们就得到了对应的手机号码归属地啊，从而显示在界面上就能够了啦。

啦啦啦，这样手机这一环节临时就结束了啊。收获还不小呢，哈哈哈哈...


相关文章