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 width: 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 width: 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>
