这两天做项目遇到了短信验证码,方面以后备用做此记录。本文使用的验证码网址:
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, '短信验证码发送失败,请联系客服!'); } } }