分类：WEB开发技术

短信验证码功能一般是我们经常在PC网站，移动网站遇到的一个功能，简单的说来是由我们的应用，在通过短信平台API返回结果到我们的应用，完成整个短信验证码获取的过程。

其实这个功能没有什么值得可以提的，但是有一点我们经常容易忽略的地方，我想提一下：

什么是短信验证码？

当我们填写手机号，获取验证码的一瞬间发生了什么过程？

1 我们用户的手机浏览器，或者PC浏览器访问到了应用的网页，或者WEBAPP的URL地址

2 服务端将基于html协议的二进制数据，通过运营商的移动网络，或者宽带 tcp/ip层传输，到用户的浏览器

3 用户浏览器根据标准的浏览器W3C标准进行解析和编译，它有一套自己的解释和编译规则

4经过浏览器解析，我们看到了页面，并输入手机号，点击获取验证码过程

5 点击按钮，程序自动链接第三方短信中心的程序API接口，将指令发送给第三方短信运营商，第三方运营商获取到需要接收的电话号码，和内容指令，然后将内容组合发送到需要接收的终端，同时返回状态给我们的应用

6 我们的应用服务器记录到状态，并将状态返回给用户，比如发送短信成功，或者失败等状态

7 用户输入获取的短信验证码，提交后台进行匹配；

至此一个简单的流程基本描述完成。

关于WEUI界面

先说下WEUI界面，WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库。

WeUI 是一套同微信原生视觉体验一致的基础样式库，为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素

采用WEIUI开发的界面，基本满足了和微信一致的界面风格和特性，非常简洁和标准化，从用户体验度来说是非常友好的；这里我就不多介绍了，具体可以查看 http://weui.github.io/weui/ 

先看下界面效果：

  

在发送验证码的时候？我们需要注意的问题是什么呢？

手机发送验证码的时候，在前端是有JS限制，不能重复提交，但后台部分遗忘了对数据包重复提交的限制问题，这样会导致，如果有刷短信验证码的规则程序，同一台电脑，可以不断用新的手机号，获取验证码，导致短信充值很快消耗完；

如何解决？

a 短信程序需要记录用户第一次访问的时间，和IP地址，并设定我们的禁止刷新的时间间隔参数

b 在第二次访问的时候，算出两次访问应用的时间差

c 每一次访问的时候，计算我们的时间差 和 我们设置的时间间隔的关系，记录每次新访问的IP记录 ，同时做比对，有两种情况 1 如果我们的访问时间间隔，在限制的时间间隔之外，我们重置所有的参数，记录新的IP 和 新的访问时间段，2 如果在时间间隔内，我们判断用户的IP地址是否为同一个IP地址，如果相同，我们则结束程序，停止发送短信。做一个简单的判断，可以防范短信验证码受到的被刷现象；

部分PHP代码片段：