최근에 프로젝트 요구 사항에 휴대 전화 번호 검증 코드가 포함 된 프로젝트를 만들었습니다. 즉, 사용자가 검증 코드를 얻기 위해 클릭하면 사용자의 휴대 전화로 메시지를 보내고 카운트 다운 버튼이 나타납니다. 이는 Alipay 휴대 전화의 결제 효과와 매우 유사합니다. 아래 두 가지 구현 코드를 아래에서 공유하겠습니다.
휴대폰 확인 코드를 얻는 방법?
Xiaoyue는 검증 코드를 얻는 데 사용하는 플랫폼을 알지 못하지만 내가 얻은 플랫폼을 알려줍니다.
Leandcloud : https://leancloud.cn/
문서 : https://leancloud.cn/docs/sms_guide-js.html
이 플랫폼에서는 계정을 등록하고 문서에 따라 작동 할 설정에 자체 정보를 설정해야합니다. 나는 그것에 대해별로 말하지 않을 것입니다. 그들 대부분은 백그라운드에서 일부 인터페이스를 작동합니다. 우리가 프론트 엔드에 능력이 있다면, 우리는 스스로 PHP에 인터페이스를 작성하려고 시도 할 수 있습니다. (나는 게으른 글을 쓸 수 없다.)
일반적으로 두 개의 인터페이스가 있습니다.
1. 확인 요청을 보내십시오 (이를 통해 휴대 전화를 SMS로 확인할 수 있습니다).
2. 휴대 전화 번호가 일관된 지 여부를 확인하고 일관성이 있는지 확인하려면 데이터를 반환합니다.
백엔드 포위 라이온의 인터페이스에 따라 구현할 수 있습니다.
프론트 엔드 페이지 작업
다음 코드는 위의 그림에 표시된 페이지입니다.
<div> <div> <span> <img src = "img/close.png"> </span> <div> <p> <p> <p> <p> <p> <p> </span> <input type = "tel"id = "mobile"onkeyup = "value = value.replace (/[^/w/.// it, '')"require ense = ""Place Hone을 입력하십시오. 숫자 "> </p> <p> <p> <p> <span> 검증 코드 : </span> <입력 유형 ="tel "placeholder ="검증 코드 입력 "> <span> 검증 코드 받기 </div> <div> <p> 제출을 성공적으로 제출하기 </p> <p> 요청이 성공한 후에 당신을 성공적으로 제출할 것입니다 </p> <p>! </p> <div> 알고 있습니다. </div> </div> </div> </div>
휴대폰 번호가 올바른지 확인하십시오
// 휴대 전화 번호 확인 // 페이지에 기록 된 일반 입력은 jQuery.extend ({checkmobileno : function (str) {var re =/^1 [3 | 7 | 5 | 8]/d {9} $/; if (re.test (str)) {return true; {return false}});JS/JQ 부품은 SMS 확인 요청을 보내는 전송을 처리합니다
// 휴대 전화로 검증 코드를 보내십시오. $ .ajax ({type : 'get', url : "배경으로 제공된 인터페이스" + 모바일, // 위의 인터페이스 1success : function (data, status) {if (data.errcode == 0) {alert ( "send"); $ ( ". code1"). "disabled"); $ ( ". code1"). css ( "back d.gethours () + ':' + d.getMinutes () + ':' + d.getSeconds (); var id = ".code1"; var end_time = new date (date.parse (time.replace (/ -/g, "/" /" /"))) .getTime (), // 월 -1sys_second = ()/100- gettime (). setInterVal (function () {if (sys_second> 1) {sys_second -= 1; var day = math.floor ((sys_second / 3600) / 24); var hour = math.floor ((sys_second / 3600) % 24); var minute = math.floor ((sys_second / 60) % 60); 60); var time_text = ''; if (day> 0) {time_text + = day + 'day';} if (Hour> 0) {if (Hour <10) {Hour = '0' + Hour;} time_text + = hour + 'Hour';} if (minute <10) {minter = 0 '}; 0) {if (second <10) {second = '0' + second;} time_text + = secon Code '); $ ( ". Code1"). CSS ( "배경색", "#f67a62");}}, 1000);서버에 정보를 제출하십시오
// 검증 코드가 휴대 전화로 보낸 검증 코드 $ .Ajax ({type : 'get', url : "interface 2", success : function (data, status) {if (data.errcode == 0) {// 서버에 정보를 제출하는 ({type : 'post', url : "server에 대한 제출". // "project_id": pid ","phone ": mobile,"device ": d}), 성공 : 기능 (data, status) {if (data.errcode == 0) {$ ( '. page1'). {alert (data.errmsg);}});} else {alert ( "확인 코드가 잘못되었습니다!");}}, error : function (data, status) {alert (status);}});위는 편집자가 무료 휴대 전화 검증 코드 카운트 다운 효과에 대해 소개 한 JS/JQ 카운트 다운 효과에 대한 전체 설명입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!