现代的网上商城中越来越多的开始使用手机注册，方便，快捷，然后作为前端，也就不可避免的要在界面上碰到关于手机号的问题，今天小小总结一下该注意哪些问题，又该来如何实现呢？
1、实现效果
先把自己当前做出来的效果传上来看下：
（备注：这里的手机号码是我随便输了一个，如果真有这个号码受到了骚扰，别怪我啊，噗噗...）
2、需要注意的问题
这里我们来简单罗列下需要注意的问题吧：
* input输入框，只能输入数字；
* 输入过程中下方同步显示所输入的内容；
* 判断输入手机号是否格式正确；
* 判断手机归属地；
3、实现步骤
1、页面结构
<div class="phone_num"> <label class="float_left">手机号码:</label> <input type="text" <span style="white-space:pre"> </span>onkeyup="javascript:ckphone(this)" onafterpaste="javascript:ckphone(this)" <span style="white-space:pre"> </span>onchange="javascript:ckphonelast(this)" <span style="white-space:pre"> </span>onblur="javascript:ckphonelast(this)" /> <div class="show_phone_num"> <span style="white-space:pre"> </span><span id="phone_showtip"><!--155 77777 6666--></span> <span class="phone_from_where" id="phone_belong"> <span style="white-space:pre"> </span><!--(广西 中国联通)--> </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的格式进行显示的，中间以空格进行间隔，这样我们就要在操作的同时，在相应的位置添加空格。
第三：我们通过正则表达式来判定手机号格式是否正确，以保证你录入的数字是一个手机号，而不是你的银行卡密码。
最后，我在这里利用淘宝的接口来判定手机的归属地，当然如果真正用到项目中肯定要调用自己的接口，不过只用来显示的话，这也无可厚非啦。
function ckbelong(phone){
$.ajax({
<span style="white-space:pre"> </span> type: "get",
<span style="white-space:pre"> </span>url: 'http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel='+phone,
<span style="white-space:pre"> </span> dataType: "jsonp",
<span style="white-space:pre"> </span> jsonp: "callback",
<span style="white-space:pre"> </span> success: function(n){
<span style="white-space:pre"> </span>$("#phone_belong").html(data.province+" "+data.catName);
<span style="white-space:pre"> </span> },
<span style="white-space:pre"> </span> error:function (data){
<span style="white-space:pre"> </span>$("#phone_belong").html("该手机号存在问题");
<span style="white-space:pre"> </span> }
});
}
我们来简单看下它的返回值都是什么呢？
这样我们就得到了相应的手机号码归属地啊，从而显示在界面上就可以了啦。
啦啦啦，这样手机这一环节暂时就结束了啊，收获还不小呢，哈哈哈哈...
版权声明：本文为博主原创文章，未经博主允许不得转载。
时间： 2024-08-07 22:07:39