本文将以php举例，介绍网页短信验证码功能的实现。

在众多的第三方短信服务商中我选择了云片网这个短信服务商，本文也将尽可能利用最简单的方式去帮助广大开发者解决短信验证码功能模块的实现。

再次之前我也参考了大部分网上的博客等，大多数都是把云片网的demo原封不动搬上去，对于我这个前端人员来说，根本毫无头绪，故此我将细致的讲解如何操作，以及献上我的源码。

我的业务流程就是通过点击发送验证码这个按钮，触发一个ajax请求事件，将手机号发送到后台，后台生成验证码发送到手机端，并返回这个验证码给前台进行验证码的验证。

请求的php后端代码如下

post.php

<?phpheader("Content-Type:text/html;charset=utf-8");$apikey = "xxxxxxxxxxxxxxx"; //修改为您的apikey(https:///v2/voice/tpl_notify.json');curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data));$result = curl_exec($ch);$error = curl_error($ch);checkErr($result,$error);return $result;}function checkErr($result,$error) {if($result === false){echo 'Curl error: ' . $error;}else{//echo '操作完成没有任何错误';}}?>

这个php后台是我在官方提供的demo上进行修改的，删除了语音验证这个功能，只保留了短信验证，并将返回给前端的数据只保留了四位数字的验证码，方便前端进行验证码的验证。

官方原demo连接如下···链接

index.html

如下代码是进行点击并发送ajax请求，将请求的验证码并保存到localStorage中

$.ajax({ type: "post", url: "post.php", //后台代码文件名 data: { mobile:$('#phone').val()//获取输入的手机号 }, // dataType: "json", success:function(data){ console.log(data); layer.msg('验证码发送成功，请注意查收！'); localStorage.setItem('code', JSON.stringify(data)) }, error:function(err){ console.log(err); } });

进行验证码验证

var code = JSON.parse(localStorage.getItem('code'))if($('#code').val() != code ){ layer.msg('验证码输入错误'); return false; }

以上验证码功能讲解完毕，如需源码请点击（源码） 自行下载，希望对大家的学习有所帮助，也希望大家多多支持。