thinkphp6+layui手机号发送验证码示例

最新推荐文章于 2023-11-30 17:27:13 发布

quweiie

最新推荐文章于 2023-11-30 17:27:13 发布

阅读量744

点赞数

分类专栏： php 文章标签： layui 前端 html

本文链接：https://blog.csdn.net/quweiie/article/details/130009419

版权

php 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

前端:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="__ADMIN__/res/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="__ADMIN__/res/layui/css/public.css" media="all">
    <style>
        body{
            background-color: #FFFFFF;
        }
    </style>
</head>
<body>
<form class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-inline">
            <input type="text" name="phone" id="phone" value="15225162266" class="layui-input">
        </div>
        <div class="layui-word-aux" style="padding-top: 4px;">
            <button type="button" class="layui-btn layui-btn-sm" id="countdown-btn">获取验证码</button>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">验证码</label>
        <div class="layui-input-inline">
            <input type="text" name="verifyCode" id="verifyCode" placeholder="请输入验证码" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="mybtn">提交</button>
        </div>
    </div>
</form>
<script src="__ADMIN__/res/layui/layui.js"></script>
<script>
  layui.config({
    base: '__ADMIN__/res/' //静态资源所在路径
  }).use(['index', 'form', 'layer'], function() {
    let $ = layui.jquery,
        form = layui.form,
        layer = layui.layer;
    form.on('submit(mybtn)',function (data){
        let dataJson=data.field;
        if(dataJson.phone==''){
            layer.msg('手机号不能为空');
            return false;
        }
        if(dataJson.verifyCode==''){
            layer.msg('验证码不能为空');
            return false;
        }
        console.log(dataJson);
        $.ajax({
            url:'{:url("/index/sms/verify/")}',
            type:'POST',
            data:dataJson,
            dataType:'json',
            success:(res)=>{
                if(res.code!=0){
                    layer.msg(res.msg);
                }
            }
        });
        return false;
    });

      $("#countdown-btn").click(function() {
          let phone=$('#phone').val();
          if(phone!=''){
              let regex = /^1[3456789]\d{9}$/; // 手机号正则表达式
              if (!regex.test(phone)) { // 验证手机号
                  layer.msg("请输入正确的手机号！");
                  return false;
              }
          }
          else{
              layer.msg("请输入手机号！");
              return false;
          }
          let count=10; // 设置倒计时时间
          let countdown=setInterval(function(){
              $("#countdown-btn").prop("disabled", true); // 禁用按钮
              $("#countdown-btn").text("重新发送("+ count +"s)"); // 更新按钮文本
              count--; // 计数器减1
              if (count === 0) { // 倒计时结束
                  clearInterval(countdown); // 清除计时器
                  $("#countdown-btn").prop("disabled", false); // 启用按钮
                  $("#countdown-btn").text("获取验证码"); // 还原按钮文本
              }
          }, 1000); // 每秒更新一次
          $.ajax({
              url:'{:url("/index/sms/index/")}',
              type:'GET',
              data:{"phone":phone},
              dataType:'json',
              success:(res)=>{
                  layer.msg(res.msg);
              }
          });
      });
  });
</script>
</body>
</html>

后端：

<?php

namespace app\index\controller;

use app\index\validate\User;

class Sms
{
    public function index(){
        $phone=input('get.phone');
        // 实例化验证器并执行验证
        $data = [
            'mobile' => $phone
        ];

        $validate = new User(); //创建User验证器
        if (!$validate->check($data)) {
            return json(['code' => 0, 'msg' => $validate->getError()]);
        }
        else{
            $res=$this->sendCode($phone);
            $result=json_decode($res, true);
            if($result['msg']=='ok'){
                return json(['code'=>0,'msg'=>'发送成功']);
            }
            else{
                return json(['code'=>1,'msg'=>'发送失败']);
            }
        }
    }

    //采用第三方的短信接口;
    public function sendCode($phone){
        $randStr = str_shuffle('1234567890');
        $rand = substr($randStr,0,6);
        session('smscode',$rand);
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, "http://sms-api.luosimao.com/v1/send.json");

        curl_setopt($ch, CURLOPT_HTTP_VERSION  , CURL_HTTP_VERSION_1_0 );
        curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 8);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
        curl_setopt($ch, CURLOPT_HEADER, FALSE);

        curl_setopt($ch, CURLOPT_HTTPAUTH , CURLAUTH_BASIC);
        curl_setopt($ch, CURLOPT_USERPWD  , 'api:key-输入key值');

        curl_setopt($ch, CURLOPT_POST, TRUE);
        curl_setopt($ch, CURLOPT_POSTFIELDS, array('mobile' => $phone,'message' => '您的验证码是：'.$rand.'，请您及时验证!【E車惠】'));

        $res = curl_exec( $ch );
        curl_close( $ch );
        //$res  = curl_error( $ch );
        return $res;
    }

    public function demo(){
        return view('/sms/index');
    }

    public function verify(){
        $code=input('post.verifyCode');

        if(!empty($code)){
            if(session('smscode')!=$code){
                return json(['code'=>1,'msg'=>'验证码有误']);
            }
            else{
                return json(['code'=>0,'msg'=>'验证码正确']);
            }
        }
        else{
            return json(['code'=>2,'msg'=>'验证码不能为空']);
        }
    }
}

User验证器：

<?php
declare (strict_types = 1);

namespace app\index\validate;

use think\Validate;

class User extends Validate
{
    /**
     * 定义验证规则
     * 格式：'字段名' =>  ['规则1','规则2'...]
     *
     * @var array
     */
    protected $rule = [
        'mobile'=>'must|mobile'
    ];

    /**
     * 定义错误信息
     * 格式：'字段名.规则名' =>  '错误信息'
     *
     * @var array
     */
    protected $message = [
        'mobile.must' => '手机号不能为空',
        'mobile.mobile'  => '手机号格式不正确'
    ];
}