jquery 页面，发送验证码，本页调用ajax

最新推荐文章于 2023-10-07 23:55:20 发布

蜗牛慢慢向上爬

最新推荐文章于 2023-10-07 23:55:20 发布

阅读量834

点赞数

本文链接：https://blog.csdn.net/a9925/article/details/48239781

版权

jquery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

页面：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title><php>echo empty($page_title) ? C('WEB_SITE_TITLE') : $page_title;</php></title>
<link href="{:CUSTOM_TEMPLATE_PATH}Index/index/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="{:CUSTOM_TEMPLATE_PATH}Index/index/css/center.css" rel="stylesheet" media="screen">
<link href="{:CUSTOM_TEMPLATE_PATH}Index/index/css/footer.css" rel="stylesheet" media="screen">

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=no">
<!-- jQuery (Bootstrap 插件需要引入) -->
    <script src="{:CUSTOM_TEMPLATE_PATH}Index/index/js/jquery-1.11.2.min.js"></script>
    <!-- 包含了所有编译插件 -->
    <script src="{:CUSTOM_TEMPLATE_PATH}Index/index/js/bootstrap.min.js"></script>
  	
</head>
<body>
 
  <div class="container">
		<div style="padding-top:10px;">
        	<div class="input-group">
               <span class="input-group-btn">
                  <button class="btn btn-default" type="button" style="padding:14px 12px; ">
                     <img src="{:CUSTOM_TEMPLATE_PATH}Index/index/img/shurusj_1.png" width="15" height="28">
                  </button>
               </span>
               <input type="text" class="form-control" style="height:56px; font-size:16px; padding-right:30px" placeholder="请输入您的11位手机号码" name="tpl" id="tpl">
               <img src="{:CUSTOM_TEMPLATE_PATH}Index/index/img/chacha.png" width="15" class="chacha_cleo">
            </div><!-- /input-group -->
            <div class="input-group" style="border-top:0">
               <span class="input-group-btn">
                  <button class="btn btn-default" type="button" style="padding:14px 12px; ">
                     <img src="{:CUSTOM_TEMPLATE_PATH}Index/index/img/shurusj_2.png" width="15" height="28">
                  </button>
               </span>
               <input type="text" class="form-control" style="height:56px; font-size:16px; border-left:0; padding-right:45%" placeholder="请输入手机验证码" name="mycode" id="mycode">
               <a class="chacha_btn lp_yam_btn" href="javascript:mobilecode()">获取验证码</a>
            </div><!-- /input-group -->
        </div>
        <div class="perfect">
			<input type="hidden" value="" id="code" name="code" />
        	<a href="javascript:" οnclick="mobileverification()">下一步</a>
        </div>
        
  </div>

  <script>

  //倒计时
		var timer = null;
		var leftsecond = 60;
		function setTime(){
			
			var second = Math.floor(leftsecond);
			
			$('.lp_yam_btn').css("background",'none repeat scroll 0 0 #B0B0B0');
		    $('.lp_yam_btn').removeAttr("onclick");
		    $('.lp_yam_btn').css("cursor",'default');
		    $('.lp_yam_btn').html(second + " 秒后重试");
			leftsecond--;
			if(leftsecond < 1){
				clearInterval(timer);
		        $('.lp_yam_btn').css("background",'none repeat scroll 0 0 #00ccff');
		        $('.lp_yam_btn').attr("onclick","Verify();");
		      	//$('.lp_yam_btn').attr("onclick","getVerify();");
		        $('.lp_yam_btn').css("cursor","pointer");
		        $('.lp_yam_btn').html("获取验证码");
			}
		}	

  function mobilecode(){
	  var tpl=$("#tpl").val();
	//  alert(tpl);
	  if(tpl){
			$.ajax({ 
				type:'post',
				url: "{:U('mobilecode')}", 
				data:"tpl="+tpl,
				success: function(msg){
					//alert(msg);
					$("#code").val(msg);
					clearInterval(timer);
					timer = setInterval(setTime, 1000, "1");
					
					/*if(msg){
						//alert('选择成功');
						 // window.location.href="{:U('orderlist','id='.$id)}";//你可以跟换里面的网址，以便成功后跳转
					}else{
						alert('选择出错');
					}*/
				}
			});
	  }else{
		alert('请输入电话号码');
	  }
  }
function mobileverification(){
	 var tpl=$("#tpl").val();
	 var mycode=$("#mycode").val();
	 var code=$("#code").val();
	if(!tpl){
		alert('请输入电话号码');
		return false;
	}
	if(!mycode){
		alert('请输入验证码');
		return false;
	}
	if(mycode!=code){
		alert('验证码输入出错');
		return false;
	}
	 window.location.href="{:U('perfectadd')}";
}
  </script>
 
<!--底部-->
 <include file="Public/bottom"/>	

  <script src="{:CUSTOM_TEMPLATE_PATH}Index/index/js/flickity-docs.min.js"></script>


</body>

</html>