前端发送短信验证

迈不过友情╰ 2022-04-12 14:26 238阅读 0赞

基于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>