1.首先,先去注册,登录后下载本身的SDK 文件内容以下 有三个php一个htmljavascript
2.下载了SDK先去读取文档内容 进行查找本身的php
accountsid(开发者控制台首页上的Account Sid)
token(开发者控制台首页上的Auth Token)
appid(应用的ID,可在开发者控制台内的短信产品下查看)
templateid(模板id)
3.我用的TP5框架 若是根据文档还有它的文件位置走,感受忒麻烦css
而后我进行了更改方式方法进行操做,把severSid里面的东西和smsyzm.php里面的东西同时拿到了我获取验证码方法内,而后就少引用了一个php文件,两个颜色合二为一,接收验证码访问此方法html
public function smsyzm(){
//载入ucpass类
require_once('/../../../thinkphp/Ucpaas.php');
//require_once('/../../../thinkphp/serverSid.php');
//初始化必填
//填写在开发者控制台首页上的Account Sid
$options['accountsid']='********';
//填写在开发者控制台首页上的Auth Token
$options['token']='*********';
//初始化 $options必填
$appid = "*******"; //应用的ID,可在开发者控制台内的短信产品下查看
$templateid = "*******"; //验证码模板 //可在后台短信产品→选择接入的应用→短信模板-模板ID,查看该模板ID
//$templateid = "*******"; //通知模板 //可在后台短信产品→选择接入的应用→短信模板-模板ID,查看该模板ID
//验证码
$param = mt_rand(100000,999999);
//$param = $_POST['yzm']; //多个参数使用英文逗号隔开(如:param=“a,b,c”),如为参数则留空
//电话号码
$mobile = $_POST['yzmtel'];
$uid = "";
$ucpass = new \Ucpaas($options);
//70字内(含70字)计一条,超过70字,按67字/条计费,超过长度短信平台将会自动分割为多条发送。分割后的多条短信将按照具体占用条数计费。
//$ucpass = new \Ucpaas();
//dump($ucpass->SendSms($appid,$templateid,$param,$mobile,$uid));
//须要打印东西在数组里面增长 进入这个SendSms方法里面
return $ucpass->SendSms($appid,$templateid,$param,$mobile,$uid);
}
4.html显示
<!--电话号码 验证码 云之讯-->
<table class="table table-bordered table-hover">
<div class="input-group" style="margin-top:6px;">
<input type="text" id="yzmtel" class="form-control" name="yzmtel" value="" placeholder="电话号码" />
<span class="input-group-btn">
<a href="javascript:void(0);" class="btn btn-primary" onclick="yzm()"><i class="fa fa-search"></i> 接收验证码</a>java
</span>jquery
<input type="text" id="yzm" class="form-control" name="yzm" value="" placeholder="验证码" style="margin-left: 3%;" yzm=""/>
<span class="input-group-btn">
<a href="javascript:search();" class="btn btn-primary"><i class="fa fa-search"></i> 提交</a></span>git
</div>github
</table>ajax
5.JSthinkphp
<script type="text/javascript">
//填电话获取验证码
function yzm () {
$.post('{:url("控制器获取方法名接收验证码")}',
{yzmtel:$('#yzmtel').val()},
function ( data ) {
if ( data ) {
console.log(data);
$('#yzm').attr('yzm',data.yzm);
} else {
console.log('亲,您输入的电话号码有误哦~请从新输入!!!');
}
});
}
</script>
这个获取验证码工序就完成了!!!若是还想防重复提交,请往下走......
我把上面的a标签换成了input框,方便显示倒计时
<table class="table table-bordered table-hover">
<div class="input-group" style="margin-top:6px;">
<input type="text" id="yzmtel" class="form-control" name="yzmtel" value="" placeholder="电话号码" />
<input type="button" class="btn btn-primary" id="getting1" value="点击获取验证码">
<input type="text" id="yzm" class="form-control" name="yzm" value="" placeholder="验证码" style="margin-left: 3%;" yzm=""/>
<span class="input-group-btn">
<a href="javascript:search();" class="btn btn-primary"><i class="fa fa-search"></i> 提交</a></span>
</div>
</table>
JS里面进行获取id 另外 还须要引用一个js jquery.cookie.js
<!--//填电话获取验证码-->
<script type="text/javascript">
$('#getting1').click(function(){
$.post('{:url("控制器获取方法名接收验证码")}',
{yzmtel:$('#yzmtel').val()},
function ( data ) {
if ( data ) {
console.log(data);
$('#yzm').attr('yzm',data.yzm);
} else {
console.log('亲,您输入的电话号码有误哦~请从新输入!!!');
}
});
});
</script>
<!--//防止重复提交电话号码获取验证码方法-->
<script>
$(function(){
/*仿刷新:检测是否存在cookie*/
if($.cookie("captcha")){
var count = $.cookie("captcha");
var btn = $('#getting1');
btn.val(count+'秒后可从新获取').attr('disabled',true).css('cursor','not-allowed');
var resend = setInterval(function(){
count--;
if (count > 0){
btn.val(count+'秒后可从新获取').attr('disabled',true).css('cursor','not-allowed');
$.cookie("captcha", count, {path: '/', expires: (1/86400)*count});
}else {
clearInterval(resend);
btn.val("获取验证码").removeClass('disabled').removeAttr('disabled style');
}
}, 1000);
}
/*点击改变按钮状态,已经简略掉ajax发送短信验证的代码*/
$('#getting1').click(function(){
/*判断手机号*/
var prosd = $('#yzmtel').val();
if(prosd && /^1[3|4|5|8]\d{9}$/.test(prosd)) {
var btn = $(this);
var count = 60;
var resend = setInterval(function () {
count--;
if (count > 0) {
btn.val(count + "秒后可从新获取");
$.cookie("captcha", count, {path: '/', expires: (1 / 86400) * count});
} else {
clearInterval(resend);
btn.val("获取验证码").removeAttr('disabled style');
}
}, 1000);
btn.attr('disabled', true).css('cursor', 'not-allowed');
}
});
});
</script>
jquery.cookie.js 代码以下
/*! * jQuery Cookie Plugin v1.4.1 * https://github.com/carhartl/jquery-cookie * * Copyright 2013 Klaus Hartl * Released under the MIT license */(function (factory) { if (typeof define === 'function' && define.amd) { // AMD define(['jquery'], factory); } else if (typeof exports === 'object') { // CommonJS factory(require('jquery')); } else { // Browser globals factory(jQuery); }}(function ($) { var pluses = /\+/g; function encode(s) { return config.raw ? s : encodeURIComponent(s); } function decode(s) { return config.raw ? s : decodeURIComponent(s); } function stringifyCookieValue(value) { return encode(config.json ? JSON.stringify(value) : String(value)); } function parseCookieValue(s) { if (s.indexOf('"') === 0) { // This is a quoted cookie as according to RFC2068, unescape... s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\'); } try { // Replace server-side written pluses with spaces. // If we can't decode the cookie, ignore it, it's unusable. // If we can't parse the cookie, ignore it, it's unusable. s = decodeURIComponent(s.replace(pluses, ' ')); return config.json ? JSON.parse(s) : s; } catch(e) {} } function read(s, converter) { var value = config.raw ? s : parseCookieValue(s); return $.isFunction(converter) ? converter(value) : value; } var config = $.cookie = function (key, value, options) { // Write if (value !== undefined && !$.isFunction(value)) { options = $.extend({}, config.defaults, options); if (typeof options.expires === 'number') { var days = options.expires, t = options.expires = new Date(); t.setTime(+t + days * 864e+5); } return (document.cookie = [ encode(key), '=', stringifyCookieValue(value), options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE options.path ? '; path=' + options.path : '', options.domain ? '; domain=' + options.domain : '', options.secure ? '; secure' : '' ].join('')); } // Read var result = key ? undefined : {}; // To prevent the for loop in the first place assign an empty array // in case there are no cookies at all. Also prevents odd result when // calling $.cookie(). var cookies = document.cookie ? document.cookie.split('; ') : []; for (var i = 0, l = cookies.length; i < l; i++) { var parts = cookies[i].split('='); var name = decode(parts.shift()); var cookie = parts.join('='); if (key && key === name) { // If second argument (value) is a function it's a converter... result = read(cookie, value); break; } // Prevent storing a cookie that we couldn't decode. if (!key && (cookie = read(cookie)) !== undefined) { result[name] = cookie; } } return result; }; config.defaults = {}; $.removeCookie = function (key, options) { if ($.cookie(key) === undefined) { return false; } // Must not alter options, thus extending a fresh object... $.cookie(key, '', $.extend({}, options, { expires: -1 })); return !$.cookie(key); };}));