js如何实现发送短信验证码,并开始倒计时,60秒内不得重发

jk 1年前 ⋅ 4572 阅读

源于:今日头条(查看原文)

相信做web开发的同学们一定都遇到过手机验证的问题,本文就是简单的介绍如何实现,如果你是web开发的老司机,请忽略此文吧。本文主要针对那些不太了解这方面知识的初级开发人员,下面开始详细说明。

整个流程

说是js发送验证码,其实真正实现发送短信功能的还是在服务器,js不过是触发发送功能。大致流程如下:

  1. 客户端js通过发送http请求(发短信接口)到服务器,将手机号等信息传递给服务器

  2. 服务器收到请求后校验参数,参数正确调用第三方短信接口,并将随机产生的验证码保存在服务器(通常是数据库或者缓存),参数错误,将错误信息返回给客户端

  3. 客户端收到服务器的返回,如果调用成功,开始倒计时同时等待用户输入收到的验证码,如果调用失败,将失败信息提示给用户。

  4. 用户输入验证码后,将验证码和手机号等信息发送到服务器校验

  5. 服务器收到校验请求后,对手机号和验证码用验证,将结果返回给客户端

  6. 客户端收到验证结果后,提示用户或者开始其他业务

简单的页面:

js如何实现发送短信验证码,并开始倒计时,60秒内不得重发

发送按钮的方法

js如何实现发送短信验证码,并开始倒计时,60秒内不得重发

倒计时方法

js如何实现发送短信验证码,并开始倒计时,60秒内不得重发

验证验证码方法

js如何实现发送短信验证码,并开始倒计时,60秒内不得重发


全部评论: 0

    我有话说:
    • OωO
    • |´・ω・)ノ
    • ヾ(≧∇≦*)ゝ
    • (☆ω☆)
    • (╯‵□′)╯︵┴─┴
    •  ̄﹃ ̄
    • (/ω\)
    • ∠( ᐛ 」∠)_
    • (๑•̀ㅁ•́ฅ)
    • →_→
    • ୧(๑•̀⌄•́๑)૭
    • ٩(ˊᗜˋ*)و
    • (ノ°ο°)ノ
    • (´இ皿இ`)
    • ⌇●﹏●⌇
    • (ฅ´ω`ฅ)
    • (╯°A°)╯︵○○○
    • φ( ̄∇ ̄o)
    • ヾ(´・ ・`。)ノ"
    • ( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
    • (ó﹏ò。)
    • Σ(っ °Д °;)っ
    • ( ,,´・ω・)ノ"(´っω・`。)
    • ╮(╯▽╰)╭
    • o(*////▽////*)q
    • >﹏<
    • ( ๑´•ω•) "(ㆆᴗㆆ)
    • (。•ˇ‸ˇ•。)
    • 颜文字