基于jq，mui做的短信验证页面。
<!DOCTYPE html>
<html class="ui-page-login">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<style>
.area {
margin: 20px auto 0px auto;
}
.mui-input-group:first-child {
margin-top: 20px;
}
.mui-input-group label {
width: 22%;
}
.mui-input-row label~input,
.mui-input-row label~select,
.mui-input-row label~textarea {
width: 78%;
}
.mui-checkbox input[type=checkbox],
.mui-radio input[type=radio] {
top: 6px;
}
.mui-content-padded {
margin-top: 25px;
}
.mui-btn {
padding: 10px;
}
.mui-input-row{
display: flex;
align-items: center;
justify-content: flex-start;
padding-left: 20px;
}
input[type=text],input[type=password]{
width: 80%;
}
.code{
width: 65% !important;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">注册</h1>
</header>
<div class="mui-content">
<form class="mui-input-group">
<div class="mui-input-row">
<div class="mui-icon mui-icon-phone"></div>
<input id='account' type="text" class=" mui-input-clear mui-input" value="13638642400" placeholder="手机号">
</div>
<div class="mui-input-row">
<div class="mui-icon mui-icon-paperclip"></div>
<input id='code' type="text" class="mui-input-clear mui-input code" placeholder="请输入验证码">
<button type="button" class=" mui-btn-blue" id="cfbut">发送</button>
</div>
<div class="mui-input-row">
<div class="mui-icon mui-icon-locked"></div>
<input id='password' type="password" class="mui-input-clear mui-input" value="123456" placeholder="请输入密码">
</div>
<div class="mui-input-row">
<div class="mui-icon mui-icon-locked"></div>
<input id='password_confirm' type="password" class="mui-input-clear mui-input" value="123456" placeholder="请确认密码">
</div>
</form>
<div class="mui-content-padded">
<button id='reg' class="mui-btn mui-btn-block mui-btn-primary">注册</button>
</div>
<div class="mui-content-padded">
<p>注册真实可用，注册成功后的用户可用于登录，但是示例程序并未和服务端交互，用户相关数据仅存储于本地。</p>
</div>
</div>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/req.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.min.js"></script>
<script src="js/app.js"></script>
<script>
(function(mui, doc) {
mui.init();
let settings = app.getSettings();
let regButton = doc.getElementById('reg');
let accountBox = doc.getElementById('account');
let passwordBox = doc.getElementById('password');
let code = doc.getElementById('code');
let passwordConfirmBox = doc.getElementById('password_confirm');
regButton.addEventListener('tap', function(event) {
var regInfo = {
account: accountBox.value,
password: passwordBox.value,
code: code.value
};
if("" == regInfo.account || "" == regInfo.password){
mui.toast('用户名或密码不能为空');
return;
}
var passwordConfirm = passwordConfirmBox.value;
if (passwordConfirm != regInfo.password) {
mui.toast('密码两次输入不一致');
return;
}
let data = {
url:"注册接口",
data:{
mobile:regInfo.account,
password:regInfo.password,
code:regInfo.code
},
}
//我自己封装的ajax，可以看看我的文章
ajax(data,function(res){
console.log(res);
if(res.code == -1){
mui.toast(res.message);
}
if(res.code == 1){
mui.toast("注册成功");
}
});
});
let i = 0,flag = true;
$("#cfbut").bind("click",function(){
if(flag){
let data = {
url:"短信接口",
data:{
mobile:accountBox.value
},
}
ajax(data,function(json){
console.log(json);
});
let time;
flag = !flag;
mui.toast('验证码已发送到您的手机，请稍等...');
time = setInterval(function(){
i++;
$("#cfbut").html("重发"+ i);
if(i > 59){
i = 0;
clearInterval(time);
mui.toast("如果验证码未收到，请重发");
flag = !flag;
$("#cfbut").html("重发");
}
},1000);
}
})
}(mui, document));
</script>
</body>
</html>