注册时输入手机号规则

注册时，web端用户输入的手机号（案例手机号为中国手机号）：
1.必填；
2.第一位必为1，第二位不能为0/1/2且总共11位数字；

html部分

// html
<div class="form-item1"><label id="sj-slc" for="">中国0086&ensp;<i class="iconfont">&#xe637;</i></label><div class="item-input-wrap form-item-valid" id="form-item-valid"><txt id="txt">建议使用常用手机号</txt><input type="text" id="inw" maxlength="11"></div><div class="wuinput-tips" id="wuinput-tips"><img src="data:images/icon-tips.png" alt="">&ensp;验证完成后，你可以使用该手机登录或找回密码</div><div class="input-tips" id="input-tips"></div> //提示手机号没有输入或者格式错误的div<div class="put-tips" id="right-tips"></div>  //提示手机号正确的div

css部分(关于.input-tips、.put-tips部分）

这两部分主要是考虑用户体验的。

// 部分css.form-item1 .input-tips{display: none;position: absolute;top: 0;left: 0;margin-top: 58px;padding-left:32px;line-height: 22px;font-size: 12px;color: #f91;}.form-item1 .input-tips:before{content: "";position: absolute;top: 3px;left: 9px;width: 17px;height: 16px;background: url("images/icon_lifeserv2.png") repeat-x -16px -100px;}.form-item1 .put-tips{display: none;position: absolute;top: 17px;right: 20px;width: 17px;height: 17px;background: url("images/icon_lifeserv2.png") repeat-x 0 -117px;}

js部分

// js
<script>function $(id) {return document.getElementById(id);}$("form-item-valid").onmouseover=function () {this.style.borderColor="rgb(153, 153, 153)";$("sj-slc").style.borderColor="rgb(153, 153, 153)";$("inw").focus();$("wuinput-tips").style.display="block";$("input-tips").style.display="none";$("txt").style.display="none";$("form-item-valid").onmouseout=function () {this.style.borderColor="rgb(221, 221, 221)";$("sj-slc").style.borderColor="rgb(221,221, 221)";}}$("inw").onblur=function () {var phone = document.getElementById('inw').value;var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;function getStrLength(phone) {var strLength = phone.length;for (var j = 0; j < phone.length; j++) {if (phone.charCodeAt(j) > 255) {strLength++;}}return strLength;}var phonnenumber = getStrLength(phone);if (phonnenumber == 0) {/*$("wuinput-tips").style.display="none";$("txt").style.display="block";*/$("wuinput-tips").className="input-tips";$("wuinput-tips").innerHTML="请输入手机号" ;}else if(phonnenumber < 11){$("wuinput-tips").className="input-tips";$("wuinput-tips").innerHTML="格式错误" ;}else if(!myreg.test(phone)){$("wuinput-tips").className="input-tips";$("wuinput-tips").innerHTML="格式错误" ;}else {$("wuinput-tips").className="put-tips";$("wuinput-tips").innerHTML="" ;}}</script>

效果图

喜欢的朋友可以参考参考~
欢迎朋友提出意见建议~

注册时输入手机号规则相关推荐

Android注册时输入字符闪退,Android开发中存在的闪退、及解决状态
1:浏览器闪退缘由:浏览器中开启了缩小放大按钮(ZoomController),在开始进入浏览器时,缩小放大按钮会出现,并在一段时间后渐变消失,当在它彻底消失前退出浏览器,在一些android系统上 ...
输入手机号获取验证码的注册页面，说出测试过程
考察的点有两个,一个是对手机号格式和验证码格式的验证,一个是对验证码获取功能的验证. 基本原理:验证码1分钟内只能发一次,有效期10分钟.验证码是后台Java代码生成的,然后验证码生成时间和此验证码会 ...
Android实战场景 - 输入手机号、银行卡号、身份证号时动态格式化
在日常项目开发中,如果稍微严谨点的话,其中关于手机号.银行卡号.身份证号的输入格式有做了限制格式化操作,主要是为了给用户带来更好的体验感: 最近同事正好问到了我这个问题,虽然以前做过这类型功能,但是并 ...
android 手机号码显示加空格,Android实现输入手机号时自动添加空格
为了用户更好的体验,我们在输入手机号的时候添加空格,方便用户查看是否输入错误,不多说代码上去 final EditText et_phone = (EditText) findViewById(R. ...
手机号验证_谷歌修改密码时遇到手机号验证的解决办法
如果你在修改谷歌账号密码时遇到手机号验证的情况,可以采用下面的方法进行修改密码即可登陆谷歌账号,按忘记密码下一步,按改用其他方式然后输入辅助邮箱,辅助邮箱是在注册账号时已经预留好的,自己填进去 ...
mac怎么查看gitlab的注册邮箱_163电子邮箱怎么注册申请？手机号注册电子邮箱的小技巧...
电子邮箱帮助我们实现了无纸化,无需手写信件,通过电脑.手机输入,即可与收件人在网络上进行联系.电子邮箱的兴起,对于人与人之间的沟通和交流,增加了便捷性,促进了社会的发展与进步.目前的邮箱中,TOM的1 ...
注册时要求获取手机短信码的实现（java）
在注册用户的时候,我们可能根据需求会需要进行手机短信的验证,本篇博客便是介绍如何实现该功能.(代码后端是基于java,框架用的是SSH) 要发向手机发短信当然就要用到第三方接口,我用的融合通信的接口. ...
短信验证（手机号注册，绑定手机号获取验证码）
今天写一个常见的功能--手机app中注册或绑定手机号的获取验证码的功能.也就是短信验证功能具体效果就是,你在注册界面填写手机号,点击获取验证码按钮,---然后会收到验证短信,填入验证码后点击注册按钮 ...
Android短信验证（手机号注册，绑定手机号获取验证码）实例
今天写一个常见的功能--手机app中注册或绑定手机号的获取验证码的功能.也就是短信验证功能具体效果就是,你在注册界面填写手机号,点击获取验证码按钮,---然后会收到验证短信,填入验证码后点击注册 ...

注册时输入手机号规则

注册时输入手机号规则

html部分

css部分(关于.input-tips、.put-tips部分）

js部分

效果图

注册时输入手机号规则相关推荐

最新文章

热门文章