基本信息
源码名称：移动端 手机验证码注册页面模板
源码大小：0.57M
文件格式：.zip
开发语言：ASP
更新时间：2018-06-04
友情提示：（无需注册或充值，赞助后即可获取资源下载链接）
嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：78630559
本次赞助数额为： 2 元×
微信扫码支付：2 元
×
请留下您的邮箱，我们将在2小时内将文件发到您的邮箱
源码介绍
xx秒后 重新发送短信验证码 html示例
xx秒后 重新发送短信验证码 html示例
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no">
<title>账号注册</title>
<!-- Set render engine for 360 browser -->
<meta name="renderer" content="webkit">
<!-- No Baidu Siteapp-->
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<!-- <link rel="icon" type="image/png" href="assets/i/favicon.png"> -->
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<!-- <link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png"> -->
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Amaze UI"/>
<!-- <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png"> -->
<!-- Tile icon for Win8 (144x144 tile color) -->
<!-- <meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png"> -->
<meta name="msapplication-TileColor" content="#0e90d2">
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
<!--
<link rel="canonical" href="http://www.example.com/">
-->
<link rel="stylesheet" href="css/amazeui.min.css">
<style>
html { font-size: 10px; }
html,body { background-color: #f0eff4; }
body { padding-bottom: 0;margin: 0; padding-top: 49px;}
* { padding: 0;margin: 0; }
header {position: fixed;top: 0;left: 0;z-index: 999;width: 100%;height: 49px; background-color: #333; color: #fff;}
header .back { position: absolute;top: 0;left: 0; display: inline-block;padding-left: 5px; font-size: 30px; }
header p { margin: 0;line-height: 49px; font-size: 16px;text-align: center; }
.register { padding: 8px 6px; font-size: 14px;}
.res-item {position: relative; width: 100%; border-radius: 4px; margin-bottom: 8px;background-color: #fff; }
.res-icon {position: absolute;left: 8px;top: 5px;z-index: 100; display: inline-block;font-size: 18px;color: #9c9c9c; }
.res-item .input-item {display: inline-block;width: 100%;padding-left: 31px;height: 40px;border: none; font-size: inherit;}
.res-item .input-item:focus {
outline-offset: 0;
outline: -webkit-focus-ring-color auto -2px;
background-color: #fefffe;
border: 1px solid #e21945;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(226,25,69,.3);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(226,25,69,0.3);
}
.res-item .input-item:focus .res-icon { color: #e21945; }
.yanzhengma {position: absolute;right: 10px;top: 5px; z-index: 100; display: inline-block;padding: 0.5rem 0.8rem;font-size: 14px; border: none;background-color: #e21945;color: #fff;border-radius: 8px; }
.yanzhengma:disabled { background-color: #ddd; }
.res-btn { margin-top: 10px;padding: 0 5px; }
.res-btn button { background-color: #e21945;font-size: 14px; color: #fff;border-radius: 8px; }
.res-btn button:focus { color: #fff; }
</style>
</head>
<body>
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a
href="http://browsehappy.com/" target="_blank">升级浏览器</a>
以获得更好的体验！</p>
<![endif]-->
<header>
<i class="am-icon-angle-left back"></i>
<p>账号注册</p>
</header>
<div class="register">
<div class="res-item">
<input type="tel" placeholder="手机号" class="input-item mobile">
<i class="res-icon am-icon-phone"></i>
</div>
<div class="res-item">
<input type="text" placeholder="验证码" class="input-item yanzheng">
<i class="res-icon am-icon-mobile"></i>
<button type="button" class="yanzhengma">发送验证码</button>
</div>
<div class="res-item">
<input type="passWord" placeholder="密码" class="input-item mima">
<i class="res-icon am-icon-check-square-o"></i>
</div>
<div class="res-item">
<input type="passWord" placeholder="确认密码" class="input-item repeatmima">
<i class="res-icon am-icon-check-circle-o"></i>
</div>
<div class="res-btn">
<button type="button" id="res-btn" class="am-btn am-btn-block">注册</button>
</div>
</div>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="js/jquery-3.2.1.min.js"></script>
<!--<![endif]-->
<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="/static/wechatMember/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script>
var times = 10;
function roof(){
if(times == 0){
$('.yanzhengma').text('发送验证码(' times 's)');
$('.yanzhengma').prop('disabled',false);
$('.yanzhengma').text('发送验证码');
times = 10;
return
}
$('.yanzhengma').text('发送验证码(' times 's)');
times--;
setTimeout(roof,1000);
}
$('.yanzhengma').on('click',function(){
$(this).prop('disabled',true);
roof();
});
$('#res-btn').on('click',function(){
var mobile = $('.mobile').val();
var yanzheng = $('.yanzheng').val();
var mima = $('.mima').val();
var repeatmima = $('.repeatmima').val();
if(!mobile){
$('.mobile').focus();
document.querySelector('.mobile').placeholder = '请填写手机号码';
return
}
if(!yanzheng){
$('.yanzheng').focus();
document.querySelector('.yanzheng').placeholder = '请填写验证码';
return
}
if(!mima){
$('.mima').focus();
document.querySelector('.mima').placeholder = '请填写密码';
return
}
if(!repeatmima){
$('.repeatmima').focus();
document.querySelector('.repeatmima').placeholder = '请填写重复密码';
return
}
if(repeatmima !== mima){
$('.repeatmima').focus();
document.querySelector('.repeatmima').value = '';
document.querySelector('.repeatmima').placeholder = '两次密码不一致';
return
}
$(this).prop('disabled',true);
alert('注册成功');
})
</script>
</body>
</html>