这两天做项目遇到了短信验证码,方面以后备用做此记录。本文使用的验证码网址:
html代码:
<input type="text" maxlength="11" class="kuang" name="tel" id="tel" placeholder=" 请输入手机账户"/> <input type="text" maxlength="6" class="kuang2" name="code" id="code" placeholder="请输入手机验证码"/> <div class="get_code">获取验证码</div>
js代码:
<script>
/*
* 获取短信验证码
*/
$(".get_code").click(function () {
var obj = $(this);
var tel = $('input[name="tel"]').val();
if (!checkTel(tel)) {
return false;
}
$.post('/home/plug/send', {'tel': tel},function (data) {
alert(data.msg);
if (data.status == 200) {
var countdown = 60;
settime(countdown, obj);//开始倒计时
return false;
}
});
})
function check_verification_code() {
var phone_verification_code = $("input[name='code']").val();
var phone_code = "{$Think.session.phone_verification_code}";
if (phone_verification_code == phone_code) {
return true;
} else {
//alert('手机验证码填写不正确');
return false;
}
}
function settime(countdown, obj) {
if (countdown == 0) {
obj.removeAttr("disabled");
obj.html("重新获取");
return;
} else {
obj.attr("disabled", true);
obj.html(countdown);
countdown--;
}
setTimeout(function () {
settime(countdown, obj)
}, 1000) //每1000毫秒执行一次
}
function checkTel(tel) {
if (tel.length == 0) {
alert('手机号码不能为空!');
return false;
}
if (!tel.match(/^(((13[0-9]{1})|15[0-9]{1}|18[0-9]|17[0-9]{1})+\d{8})$/)) {
alert('手机号码格式不正确!');
return false;
}
return true;
}
/*
* 判断验证码是否正确
*/
$("input[name='code']").blur(function () {
if (!check_verification_code()) {
return false;
}
});
//ajax表单提交
$("#btn").on('click', function () {
var tel = $('#tel').val();
var code = $('#code').val();
if (tel == '') {
alert('请输入手机账户');
$('#tel').focus();
return false;
}
// 判断手机号码
if ($.trim(tel).length == 0) {
alert('请输入手机账户');
$('#tel').focus();
return false;
}
if (checkTel($.trim(tel)) == false) {
alert('手机号码格式不正确');
$('#tel').focus();
return false;
}
if (code == '') {
alert('请输入手机验证码');
$('#code').focus();
return false;
}
if (!check_verification_code()) {
alert('手机验证码不正确');
$('#code').focus();
return false;
}
var action = $('#ajax_form').attr('action');
$.ajax({
type: "post",
url: action,
data: $("#ajax_form").serialize(),
success: function (data) {
alert(data.msg);
if (data.url) {
return window.location.href = data.url;
}
},
error: function (data) {
return alert(data.msg);
}
})
});
});
</script>php代码:首先要在扩展载入手机验证码类,文章底部有下载地址
public function send()
{
//初始化必填
$options['accountsid'] = ''; //填写自己的
$options['token'] = ''; //填写自己的
//初始化 $options必填
$ucpass = new Ucpaas($options);
//短信验证码(模板短信),默认以65个汉字(同65个英文)为一条(可容纳字数受您应用名称占用字符影响),超过长度短信平台将会自动分割为多条发送。分割后的多条短信将按照具体占用条数计费。
$appId = ""; //填写自己的
$to = $_POST['tel'];
$check_tel = Db::name('user')->where('tel',$to)->count();
if ($check_tel>0) {
return ajaxReturn(0, '该手机已被注册!');
} else {
$templateId = "123123";
$param = rand(100000,999999);
session('phone_verification_code', $param);
$arr = $ucpass->templateSMS($appId, $to, $templateId, $param);
if (substr($arr, 21, 6) == 000000) {
//如果成功就,这里只是测试样式,可根据自己的需求进行调节
return ajaxReturn(200, '短信验证码已发送成功,请注意查收短信!', '', $param);
} else {
//如果不成功
return ajaxReturn(0, '短信验证码发送失败,请联系客服!');
}
}
}