完整的手机注册验证功能

浏览：972次- 评论：1次- 发布时间：2018-12-17

Html

Css


    
        
            基本信息
            请输入真实的信息
            
        
        
            *
            手机号
            
        
        
            *
            验证码
            
            
        

        
            设置密码
            
            

        
        
            
                   
               
            建议使用字母、文字两种以上组合方式，6-20个字符

        
        
        
            
                   
                   我同意《服务条款》
               

        
    

    
        
            
        
        返回首页
        继续完善个人信息

body {
	background:#f5f5f5;
}
.user_top {
	width:100%;
	height:130px;
	line-height:180px;
	margin:auto;
	border-bottom:3px solid #ebebeb;
}
.user_top .user_top1 {
	width:1100px;
	margin:auto;
	height:130px;
}
.user_zhu {
	float:right;
	line-height:224px;
	height:130px;
}
.user_zhu .user_zhu1 {
	color:#e4393c;
	margin-right:20px;
	font-weight:600;
}
.user_zhu .user_zhu2 {
	font-size:12px;
	color:#b3b3b3;
}
.user_zhu .user_zhu2 a {
	color:#ff0000;
}
.user_log {
	width:100%;
	height:740px;
	margin:auto;
	background:#ffffff;
}
.user_log .user_login {
	width:400px;
	height:400px;
	margin:auto;
	padding-top:125px;
}
.user_log .user_login .user14 {
	font-size:16px;
	display:inline-block;
	color:#333333;
	float:left;
	margin-left:30px;
}
.user_log .user_login .user12 {
	font-size:12px;
	display:-webkit-box;
	color:#b3b3b3;
	float:left;
	margin-top:5px;
	margin-left:15px;
}
.user_log .user_login2 {
	margin-top:30px;
}
.user_log .user_login2 .user_sjh {
	color:#999999;
}
.user_log .user_login2 .Cell-phone {
	margin-left:14px;
	width:260px;
	height:33px;
	border:1px solid #d0c7c7;
	background-color:transparent;
	padding-left:5px;
}
.user_log .user_login3 {
	margin-top:30px;
}
.user_log .user_login3 .user_sjh1 {
	color:#999999;
}
.user_log  .user_login4 .pass_mi {
	color:#999999;
	font-size:14px;
}
.user_log .user_login3 .Cell-phone1 {
	margin-left:14px;
	width:155px;
	height:33px;
	border:1px solid #d0c7c7;
	background-color:transparent;
	padding-top:1px;
	padding-bottom:0px;
	padding-left:5px;
}
.user_log .user_login3 .yzm {
	height:36px;
	width:105px;
	background:#e8e8e8;
	border:1px solid #d0c7c7;
	padding-top:5px;
	padding-bottom:6px;
}
.user_log .user_login4 {
	margin-top:35px;
	position:relative;
}
.user_log .user_login4 p {
	margin-left:13px;
	text-align:left;
	color:#999999;
}
#password1 {
	margin-left:35px;
	width:260px;
	height:33px;
	border:1px solid #d0c7c7;
	background-color:transparent;
	padding-left:5px;
}
#conform_password {
	margin-left:8px;
	width:260px;
	height:33px;
	border:1px solid #d0c7c7;
	background-color:transparent;
	padding-left:5px;
}
#conform_password_notice {
	display:block;
	font-size:12px;
	color:#e4393c;
	margin-left:72px;
}
#username_notice {
	display:block;
	font-size:12px;
	color:#e4393c;
	margin-left:72px;
}
#password {
	width:330px;
	height:33px;
	border:1px solid #d0c7c7;
	background-color:transparent;
	margin-left:10px;
	padding-left:5px;
}
.user_log .user_login4 .ck_pass {
	position:absolute;
	top:57%;
	left:85%;
}
.user_log  .pass_gs {
	font-size:12px;
	color:#808080;
	margin-top:10px;
}
.user_log  .pass_gs .pass_bj img {
	margin-bottom:3px;
}
.user_log .user_login  .usertj {
	width:330px;
	height:40px;
	background:#e4393c;
	color:#ffffff;
	border:0px solid #d0c7c7;
	margin-top:25px;
	font-size:18px;
	margin-left:10px;
}
.user_log .user_login5 {
	margin-top:10px;
	font-size:14px;
}
.user_log .user_login5 span a {
	color:#e4393c;
}
.user_log .Success {
	width:400px;
	height:400px;
	margin:auto;
	padding-top:140px;
	text-align:center;
	display:none;
}
.user_log .Success .fanhui {
	width:320px;
	height:40px;
	line-height:40px;
	background:#e4393c;
	color:#ffffff;
	margin:auto;
	text-align:center;
	display:inline-block;
	margin-top:20px;
}
.user_log .Success .wans {
	width:320px;
	height:40px;
	line-height:40px;
	margin:auto;
	text-align:center;
	display:inline-block;
	margin-top:20px;
	background:#11c64d;
	color:#ffffff;
}

$(function() {
     $(".yzm").click(function() {
         var a = $(".Cell-phone").val()
         if (a == null || a == undefined || a == "") {
             alert("手机号不能为空");
         } else {
             if (!(/^1[34578]\d{9}$/.test(a))) {
                 alert("手机号码有误，请重填");
             } else {
                 var s = 60;
                 alert("发送成功")
                 $(".yzm").attr("disabled", "ture");
                 var set = setInterval(function() {
                     s--;
                     $(".yzm").val(s + "s后可发送");
                     if (s == 0) {
                         $(".yzm").val("获取验证码");
                         clearInterval(set);
                         $(".yzm").removeAttr("disabled");
                     }
                 }, 1000);
             }
         }
     })

$(".ck_pass").click(function() {
         if ($("#password").prop('type') == 'password') {
             $("#password").prop('type', 'text');
         } else {
             $("#password").prop('type', 'password');
         }
     })
     $(function() {
         if ($("#checkbox-id").get(0).checked) {
             $(".user??tj").removeAttr("disabled");

} else {
             $(".user??tj").attr("disabled", "ture");
         }
     })
     $("#checkbox-id").click(function() {
         if ($("#checkbox-id").get(0).checked) {
             $(".user??tj").removeAttr("disabled");

} else {
             $(".user??tj").attr("disabled", "ture");

}
     })

$(".user??tj").click(function() {
         var pa = $("#password").val();
         var y = $(".Cell-phone1").val();

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.1