本文将以php举例，介绍网页短信验证码功能的实现。
在众多的第三方短信服务商中我选择了云片网这个短信服务商，本文也将尽可能利用最简单的方式去帮助广大开发者解决短信验证码功能模块的实现。
再次之前我也参考了大部分网上的博客等，大多数都是把云片网的demo原封不动搬上去，对于我这个前端人员来说，根本毫无头绪，故此我将细致的讲解如何操作，以及献上我的源码。
我的业务流程就是通过点击发送验证码这个按钮，触发一个ajax请求事件，将手机号发送到后台，后台生成验证码发送到手机端，并返回这个验证码给前台进行验证码的验证。
请求的php后端代码如下
post.php
<?phpheader("Content-Type:text/html;charset=utf-8");$apikey = "xxxxxxxxxxxxxxx"; //修改为您的apikey(https://www.yunpian.com)登录官网后获取$mobile =$_POST["mobile"]; //获取传入的手机号// $mobile = "xxxxxxxxxxx"; //请用自己的手机号代替$num = rand(1000,9999); //随机产生四位数字的验证码setcookie("shopCode",$num);$text="【蒙羊羊】您的验证码是".$num."。";$ch = curl_init();/* 设置验证方式 */curl_setopt($ch, CURLOPT_HTTPHEADER, array("Accept:text/plain;charset=utf-8","Content-Type:application/x-www-form-urlencoded", "charset=utf-8"));/* 设置返回结果为流 */curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);/* 设置超时时间*/curl_setopt($ch, CURLOPT_TIMEOUT, 10);/* 设置通信方式 */curl_setopt($ch, CURLOPT_POST, 1);curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);// 取得用户信息$json_data = get_user($ch,$apikey);$array = json_decode($json_data,true);// echo "<pre>";print_r($array);// 发送短信$data=array("text"=>$text,"apikey"=>$apikey,"mobile"=>$mobile);$json_data = send($ch,$data);$array = json_decode($json_data,true);// echo "<pre>";print_r($array);// 发送模板短信// 需要对value进行编码$data = array("tpl_id" => "1", "tpl_value" => ("#code#")."=".urlencode($num)."&".urlencode("#company#")."=".urlencode("蒙羊羊"), "apikey" => $apikey, "mobile" => $mobile);// print_r ($data);$json_data = tpl_send($ch,$data);$array = json_decode($json_data,true);echo $num;// 发送语音验证码// $data=array("code"=>$num,"apikey"=>$apikey,"mobile"=>$mobile);// $json_data =voice_send($ch,$data);// $array = json_decode($json_data,true);// echo $num;// 发送语音通知，务必要报备好模板/* 模板： 课程#name#在#time#开始。 最终发送结果： 课程深度学习在14:00开始 */$tpl_id = "xxxxxxx"; //修改为你自己后台报备的模板id$tpl_value = urlencode("#time#")."=".urlencode($num)."&".urlencode("#name#")."=".urlencode("蒙羊羊");$data=array("tpl_id"=>$tpl_id,"tpl_value"=>$tpl_value,"apikey"=>$apikey,"mobile"=>$mobile);$json_data = notify_send($ch,$data);$array = json_decode($json_data,true);// echo $num;curl_close($ch);/************************************************************************************///获得账户function get_user($ch,$apikey){curl_setopt ($ch, CURLOPT_URL, "https://sms.yunpian.com/v2/user/get.json");curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query(array("apikey" => $apikey)));$result = curl_exec($ch);$error = curl_error($ch);checkErr($result,$error);return $result;}function send($ch,$data){curl_setopt ($ch, CURLOPT_URL, "https://sms.yunpian.com/v2/sms/single_send.json");curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data));$result = curl_exec($ch);$error = curl_error($ch);checkErr($result,$error);return $result;}function tpl_send($ch,$data){curl_setopt ($ch, CURLOPT_URL, "https://sms.yunpian.com/v2/sms/tpl_single_send.json");curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data));$result = curl_exec($ch);$error = curl_error($ch);checkErr($result,$error);return $result;}function voice_send($ch,$data){curl_setopt ($ch, CURLOPT_URL, "http://voice.yunpian.com/v2/voice/send.json");curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data));$result = curl_exec($ch);$error = curl_error($ch);checkErr($result,$error);return $result;}function notify_send($ch,$data){curl_setopt ($ch, CURLOPT_URL, "https://voice.yunpian.com/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; }以上验证码功能讲解完毕，如需源码请点击（源码） 自行下载，希望对大家的学习有所帮助，也希望大家多多支持网页设计。
