1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 7 <style> 8 .content > div { 9 border-bottom: 0.0833rem solid #33B98E; 10 display: flex; 11 height: 4.0833rem; 12 } 13 14 .content img { 15 margin-top: 1.8333rem; 16 } 17 18 .content input { 19 padding-left: 2.3333rem; 20 display: inline-block; 21 100%; 22 margin-top: 0.8333rem; 23 height: 3.6667rem; 24 border: none; 25 outline: none; 26 background: none; 27 font-size: 1.25rem; 28 /*color: rgba(255,255,255,1);*/ 29 opacity: 0.5; 30 } 31 32 .content input::-webkit-input-placeholder { 33 color: #FFFFFF; 34 } 35 36 .weui-cell__ft span:last-child { 37 color: red; 38 } 39 .flex-req { 40 display: inline-block; 41 9.6667rem; 42 margin-top: 0.6rem; 43 height: 2.9167rem; 44 background: #B5FFE4; 45 border-radius: 1.4167rem; 46 text-align: center; 47 line-height: 2.9167rem; 48 font-size: 1.25rem; 49 } 50 51 .reqCode { 52 color: #239683; 53 } 54 .notreq { 55 color: #EA5E12; 56 } 57 .parent-warn { 58 position: relative; 59 } 60 61 .parent-warn > span { 62 display: inline-block; 63 background-size: 1.5833rem; 64 } 65 </style> 66 <script src="js/jquery.js"></script> 67 </head> 68 <body> 69 <div class="content"> 70 <div class="parent-warn"> 71 <input class="tel" placeholder="请输入手机号" type="tel" name="tel" /> 72 <div class="warn tel-warn" style="display:none">手机格式错误</div> 73 </div> 74 <div class="flex-tel parent-warn"> 75 <div class=""> 76 <input class="tel-code" type="tel" name="tel" placeholder="验证码" max="6" /> 77 <div class="warn tel-warn" style="display:none">验证码错误</div> 78 </div> 79 <div class="flex-req"> 80 <span class="reqCode">获取验证码</span> 81 <span class="notreq" style="display:none"> 82 <span class="time"></span> 83 S后重发 84 </span> 85 </div> 86 </div> 87 </div> 88 89 <script src="js/jquery.js"></script> 90 <script> 91 $(function(){ 92 var userTel = ''; 93 var totalTime = 60; 94 var code = 1; 95 96 $('.tel').on('keyup', function () { 97 userTel = $('.tel').val(); 98 }) 99 100 //验证手机号是否正确的方法 101 function validatemobile(num) { 102 if (num.length = 11) { 103 var passWelcome = /^1[34578]d{9}$/; 104 if (passWelcome.test(num)) { 105 $('.tel-warn').hide(); 106 code = 0; 107 } else { 108 $('.tel-warn').show(); 109 } 110 }else { 111 $('.tel-warn').show(); 112 } 113 } 114 115 //点击验证手机号及获取手机验证码 116 $('.reqCode').on('click', function () { 117 validatemobile(userTel); 118 if (code === 1) { 119 return; 120 } else { 121 $('.reqCode').hide(); 122 $('.notreq').show(); 123 $('.time').text(totalTime); 124 //设置定时器 125 var timer = setInterval(function () { 126 $('.time').text(totalTime); 127 if (totalTime > 10) { 128 totalTime--; 129 } else if (totalTime <= 10) { 130 totalTime--; 131 totalTime = '0' + totalTime; 132 } else { 133 $('.reqCode').show(); 134 $('.notreq').hide(); 135 totalTime = 60; 136 code = 1; 137 clearInterval(timer); 138 } 139 140 }, 1000); 141 //发送获取验证码请求 142 $.post(url, { phone: userTel}, function (result) { 143 console.log(result) 144 }); 145 } 146 }) 147 }) 148 149 </script> 150 </body> 151 </html>