积跬步,聚小流------关于手机号,前端应该注意哪些
现代的网上商城中越来越多的開始使用手机注冊。方便,快捷,然后作为前端。也就不可避免的要在界面上碰到关于手机号的问题。今天小小总结一下该注意哪些问题,又该来怎样实现呢?
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("该手机号存在问题"); } }); }
这样我们就得到了对应的手机号码归属地啊,从而显示在界面上就能够了啦。
啦啦啦,这样手机这一环节临时就结束了啊。收获还不小呢,哈哈哈哈...