html5用手机号码注册表单代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 html5用手机号码注册表单代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
    <meta charset="utf-8">
    <title>注册页</title>
    <link href="resource/css/common.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="resource/js/jquery.js"></script>
    <script type="text/javascript" src="resource/js/jquery.validate.js"></script>
    <script type="text/javascript" src="resource/js/interaction.js"></script>
</head>
<body style="background-color:#f4f4f4;">
    <div class="headBar">
        <a href="javascript:history.back(-1)"><img class="headleft" src="resource/images/backjt.png"/></a>
        <span>手机注册</span>
    </div>
    <div class="mth1">
    </div>
    <div class="register">
    <form id="registerForm1" action="register2.html">
    <div class="mid mt10" style="width:80%;">
      <span class="registerinputlabel">+86</span><span><img id="registericon1" class="registerinputicon" src="resource/images/registericon1.png"/></span>
      <input type="tel" id="registermobile" name="registermobile" style="width:80%;" maxlength="11" value="输入手机号码" />
      <br/><label class="tip">为了安全，我们会向你的手机发送验证码</label>
    </div>
    <div class="mid mt10" style="width:80%;">
      <span class="registerinputlabel">密码 :</span><span><img id="registericon2" class="registerinputicon" style="width:24px;" src="resource/images/registericon2.png"/></span>
      <input type="password" id="registerkeyword" name="registerkeyword" style="width:80%;"/>
      <label class="keywordtip">设置登入密码</label>
      <br/><label class="error" for="registerkeyword"></label>
    </div>
    <div class="mid mt10" style="width:80%;">
      <input type="submit" style="color:#fff;font-size:16px; background:#2d94fb;border:none;border-radius:2px; width:100%;" value="下一步" />
    </div>
    </form>
    <div class="mid agreement">
        <img class="yesbtn" src="resource/images/yesBtn.png"/>
        <span>点击"下一步",即表示本人已同意<a href="#">《注册协议》</a></span>
    </div>
    </div>
</body>
</html>

JS代码(interaction.js):

$(function(){
	var InterValObj;
	//timer鍙橀噺锛屾帶鍒舵椂闂?var count = 60;
	//闂撮殧鍑芥暟锛?绉掓墽琛?var curCount;
	//褰撳墠鍓╀綑绉掓暟//鎵嬫満鍙?$("#loginmobile").focus(function(){
	if(this.value=="鎵嬫満鍙锋垨鑳庡ぇ鐜嬭处鍙风櫥鍏?){
	this.value="";
}
}
);
	$("#loginmobile").blur(function(){
	if(this.value==""){
	this.style.color="#ccc";
	this.value="鎵嬫満鍙锋垨鑳庡ぇ鐜嬭处鍙风櫥鍏?;
}
}
);
	$("#loginmobile").keydown(function(){
	this.style.color="#fff";
}
);
	//瀵嗙爜$("#loginkeyword").focus(function(){
	if(this.value=="璇疯緭鍏ュ瘑鐮?){
	this.value="";
}
}
);
	$("#loginkeyword").blur(function(){
	if(this.value==""){
	this.style.color="#ccc";
	this.value="璇疯緭鍏ュ瘑鐮?;
}
}
);
	$("#loginkeyword").keydown(function(){
	this.style.color="#fff";
}
);
	// 琛ㄥ崟楠岃瘉銆佽浣忕敤鎴峰悕$("#loginForm").validate({
	rules:{
	loginmobile:{
	required:true}
,loginkeyword:{
	required:true,rangelength:[4,12]}
}
,messages:{
	loginmobile:{
	required:"鎵嬫満鍙蜂笉鑳戒负绌?}
,loginkeyword:{
	required:"璇峰～鍐欏瘑鐮?,rangelength:"璇峰～鍐欐纭殑瀵嗙爜"}
}
}
);
	//鎵嬫満鍙?$("#registermobile").focus(function(){
	if(this.value=="杈撳叆鎵嬫満鍙风爜"){
	this.value="";
}
}
);
	$("#registermobile").blur(function(){
	if(this.value==""){
	this.style.color="#8f8f8f";
	this.value="杈撳叆鎵嬫満鍙风爜";
}
}
);
	$("#registermobile").keydown(function(){
	this.style.color="#000";
}
);
	//瀵嗙爜$("#registerkeyword").focus(function(){
	if(this.value==""){
	$(".keywordtip").css("display","none");
}
}
);
	$(".keywordtip").click(function(){
	if($("#registerkeyword").val()==""){
	$(".keywordtip").css("display","none");
	$("#registerkeyword").focus();
}
}
);
	$("#registerkeyword").blur(function(){
	if(this.value==""){
	$(".keywordtip").css("display","block");
}
}
);
	$("#registerkeyword").keydown(function(){
	this.style.color="#000";
}
);
	$("#registericon1").click(function(){
	var a=$("#registermobile")[0].value;
	if(a!=""&&a!="杈撳叆鎵嬫満鍙风爜"){
	$("#registermobile").val("");
	$("#registermobile").focus();
}
}
);
	/*$("#registericon2").click(function(){
	$(".keywordtip").css("display","none");
	$("#registerkeyword").focus();
	$("#registerkeyword").attr("type","text");
}
);
	*/
//楠岃瘉鐮?$("#registercaptcha").blur(function(){
	if(this.value==""){
	this.style.color="#8f8f8f";
}
}
);
	$("#registercaptcha").keydown(function(){
	this.style.color="#000";
}
);
	//瀹㈡湇鐑嚎 閬僵//閬僵$("#callservice").click(function(){
	ShowGuide();
}
);
	function ShowGuide(){
	$(".guide_cover").css("height",$(document).height()+"px").fadeIn();
	if($(window).height()<$(".callservice").height()){
	$(".callservice").css({
	"margin-top":-$(window).height()/2+"px"}
);
}
$(".callservice").fadeIn();
}
function HideGuide(){
	$(".guide_cover").fadeOut();
	$(".callservice").fadeOut();
}
$(".guide_cover,#callcancel,#callconfirm").click(function(){
	HideGuide();
}
);
}
);

CSS代码(common.css):

body,html,div,p,ul,li,a,img,h1,h2,h3,h4,form,input,dl,dd,dt,select,input{margin:0;padding:0;font-family:"寰蒋闆呴粦";}
body{font-family:"寰蒋闆呴粦";}
a,a:hover{color:#fff;text-decoration:none;}
/*******************Login Page*************************/
.login{width:100%;}
.mid{width:65%;margin:0 auto;position:relative;text-align:center;}
.loginbg{width:100%;position:absolute;background-color:#000;top:0px;height:100%;overflow:hidden;}
.bgImg{width:100%;}
.logo{width:45%;max-width:464px;}
.login input{height:38px;background:none;border:none;}
.orangebtn{font-family:"寰蒋闆呴粦";height:38px;background:#fd6417;text-align:center;color:#ffffff;font-size:14px;border:none;cursor:pointer;border-radius:5px;border:none;}
.greybtn{font-family:"寰蒋闆呴粦";position:absolute;width:70%;height:38px;left:15%;background:#f1e4e2;opacity:0.5;filter:alpha(opacity=50);text-align:center;border:none;cursor:pointer;border-radius:20px;}
.inputicon{position:absolute;height:30px;left:0px;top:2px;z-index:10;}
#loginForm label.error{position:absolute;top:40px;left:35px;color:#ff0000;font-size:12px;text-align:left;z-index:2;}
#loginmobile{padding:0px 5px 0px 40px;color:#ccc;background:url(../images/inputline.png) no-repeat bottom;background-size:100%;font-size:12px;}
#loginkeyword{padding:0px 5px 0px 40px;color:#ccc;background:url(../images/inputline.png) no-repeat bottom;background-size:100%;font-size:12px;}
.bottomleft{float:left;font-size:14px;}
.bottomright{float:right;font-size:14px;}
.loginBottom{width:100%;bottom:5px;position:absolute;color:#fff;font-size:12px;text-align:center;}
@media only screen and (min-device-height:730px){#loginmobile{font-size:14px;}
#loginkeyword{font-size:14px;}
.loginBottom{font-size:14px;}
}
/*******************Register Page*************************/
.register input{height:40px;background-color:#fff;border:none;overflow:hidden;font-size:14px;}
.registerinputlabel{width:40px;position:absolute;left:8px;top:10px;font-size:14px;text-align:left;}
.registerinputicon{width:20px;position:absolute;right:5px;bottom:10px;}
#registermobile{color:#8f8f8f;padding:0px 0px 0px 20%;}
#registerkeyword{color:#8f8f8f;padding:0px 0px 0px 20%;}
#registerForm1 label.tip{position:absolute;width:100%;top:45px;left:5px;color:#a9a9a9;font-size:12px;text-align:left;}
.keywordtip{position:absolute;top:12px;left:20%;color:#a9a9a9;font-size:14px;text-align:left;}
.agreement{margin-top:8px;width:auto;max-width:80%;}
.agreement span{color:#a9a9a9;font-size:12px;padding-left:40px;text-align:left;float:left;}
.agreement img{position:absolute;left:20px;top:0px;width:18px;}
.agreement a{color:#ed6301;}
.successimg{position:absolute;left:-5%;top:0;width:14%;max-width:50px;}
.successtip{padding-bottom:3%;height:30px;line-height:30px;}
@media only screen and (max-device-width:320px){.agreement span{padding-left:14px;text-align:left;}
.agreement img{left:-3px;top:0px;width:15px;}
}
@media only screen and (min-device-width:414px){.successimg{left:1%;top:-8%;}
}
/*********************************2**********************************/
#registerForm2 label.tip{position:absolute;width:100%;top:45px;left:5px;color:#a9a9a9;font-size:14px;text-align:left;}
.register2label{width:100%;font-size:16px;text-align:left;float:left;padding-left:5px;}
.registerinputiconleft{width:20px;position:absolute;left:5px;top:10px;}
#registercaptcha{color:#8f8f8f;padding:0px 0px 0px 15%;}
/******************************鍏敤***************************************/
.mt25{margin-top:25%;}
.mt20{margin-top:20%;}
.mt15{margin-top:15%;}
.mt10{margin-top:10%;}
.mt5{margin-top:5%;}
.mt3{margin-top:3%;}
.mth1{height:46px;}
.mth2{height:77px;}
.mth3{height:60px;}
.fright{float:right;margin-right:20px;}
.red1{color:#ff1d00;}
.blue2{color:#65a1e4;}
.tline{border-top:1px solid #e6e6e6;}
.greyword{color:#646464;}
.headBar{position:fixed;top:0px;z-index:100;width:100%;height:46px;overflow:hidden;background-color:#fff;line-height:46px;}
.headBar img{position:absolute;top:10px;height:25px;}
.headBar span{width:100%;display:block;height:46px;font-size:18px;text-align:center;}
.headright{right:20px;}
.headleft{left:15px;}
.green2{background-color:#00c048;}
.orange2{background-color:#ff7e00;}
.green3{background-color:#1dc780;}
.red3{background-color:#d20808;}

附件:下载该文件资源,减少时间成本(增值服务)