# 引入 # **[PHPMailer](https://github.com/PHPMailer/PHPMailer)** 邮件 github地址:https://github.com/PHPMailer/PHPMailer 第一步下载:https://github.com//PHPMailer/PHPMailer/archive/master.zip、 第二步把下载文件放到 extend 文件夹下面,建立一个文件夹叫做PHPMailer,全部放在里面 第三步 在自己方法里面引入两个文件 ~~~ require_once("../extend/static/PHPMailer/src/PHPMailer.php"); require_once("../extend/static/PHPMailer/src/SMTP.php"); ~~~ # Html 代码页面 ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Pragma" content="no-cache"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> <meta name="format-detection" content="telephone=yes"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <title>手机注册信息</title> <!-- Bootstrap core CSS--> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script> <script src="https://cdn.bootcss.com/sweetalert/2.1.2/sweetalert.min.js"></script> <style type="text/css"> body{ margin: 0; padding: 0; } .modal_content{ padding: 30px; display: flex; justify-content: center; flex-direction: column; } .modal_content>div{ margin-bottom: 20px; } .modal_content>h5:first-child{ margin:30px 0px; } #dialog label{ color: #666; } #phone1{ display: block; width: 100%; height: 70px; background: none; padding-top: 30px; border: 0; outline:none; text-align: center; margin-top: -30px; font-size: 16px; border-bottom: 1px solid rgba(0,0,0,.2); border-radius: 0; } .code1{ display: flex; flex-direction: row; justify-content: space-between; width: 100%; height: 70px; background: none; padding-top: 30px; margin-top: -30px; font-size: 16px; border-bottom: 1px solid rgba(0,0,0,.2); border-radius: 0; } #code1{ width: calc(100% - 90px); height: 55px; background: none; padding-top: 20px; border: 0; outline:none; text-align: center; margin-top: -20px; font-size: 16px; } #btnSendCode1{ width: 90px; height: 30px; padding: 0 5px; margin: 0; font-size: 14px; text-align: center; background: transparent; border-radius: 30px; color: #a07941; border-color: #a07941; } ::-webkit-input-placeholder { /* WebKit browsers */ font-size: 14px; color: rgba(0,0,0,.4); } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ font-size: 14px; color: rgba(0,0,0,.4); } ::-moz-placeholder { /* Mozilla Firefox 19+ */ font-size: 14px; color: rgba(0,0,0,.4); } :-ms-input-placeholder { /* Internet Explorer 10+ */ font-size: 14px; color: rgba(0,0,0,.4); } .next{ text-align: center; margin: 20px 0; } .next button{ width: 100%; height: 45px; padding: 0; margin: 0; background: #007BFF; color: #fff; border: 0; outline:none; border-radius: 3px; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-3"></div> <div class="modal_content col-md-6"> <form action="post" id="register"> <div> <label for="phone1">手机号:</label><br /> <input id="phone1" type="text" autocomplete="off" name="phone" value="461476246@qq.com" placeholder="请输入已绑定的手机号"/> </div> <div> <label for="phone1">密码:</label><br /> <input type="password" autocomplete="off" name="password" style=" display: block; width: 100%; height: 70px; background: none; padding-top: 30px; border: 0; outline: none; text-align: center; margin-top: -30px; font-size: 16px; border-bottom: 1px solid rgba(0,0,0,.2); border-radius: 0;"/> </div> <div> <label for="code1">验证码:</label> <div class="code1"> <input id="code1" type="text" name="codes" autocomplete="off" placeholder="短信验证码"/> <button id="btnSendCode1" type="button" class="btn btn-default" value="" >获取验证码</button> </div> </div> <div class="next"> <button onClick="binding()" type="button">确定</button> </div> </form> </div> <div class="col-md-3"></div> </div> </div> <script language="javascript"> // var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;//手机号正则 let phoneReg = /(^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$)/; //邮箱验证 $(function () { //点击发送验证码 $('body').on('click', '#btnSendCode1', function () { let phone = $.trim($('#phone1').val()); if (!phoneReg.test(phone)) { alert(" 请输入有效的手机号码"); return false; } $('body').off('click', '#btnSendCode1'); //向后台发送处理数据 $.ajax({ type: 'post', //提交后台php文件 url: "{:url('index/index/email')}", // 得到表单提交的数据 data:{'phone':phone} , dataType: 'json', //回调处理 success: function(data){ if (data.status ==1) { swal({ //弹出后台返回的消息 text: data.message, icon: "success", button: false }); }else{ swal({ text: data.message, icon: "warning", button: false }); } } }) LockButton('#btnSendCode1', 60); }) //读取cookie if ($.cookie("djsendtime") != undefined && !isNaN($.cookie("djsendtime"))) { //读取到了cookie值 let djsendtime = $.cookie("djsendtime"); let now = new Date().getTime(); //当前时间戳 let locksecends = parseInt((djsendtime - now) / 1000); if (locksecends <= 0) { $.cookie("djsendtime", null); } else { LockButton('#btnSendCode1', locksecends); } } }) // 按钮倒计时 var LockButton = function (btnObjId, locksecends) { //1.获取当前系统时间 //2.获取 locksecends 后的系统时间 //3.用cookie保存到期时间 //4.每次加载后获取cookie中保存的时间 //5.用到期时间减去当前时间获取倒计时 let djsendtime = $.cookie("djsendtime"); if (djsendtime == null || djsendtime == undefined || djsendtime == 'undefined' || djsendtime == 'null') { var now = new Date().getTime(); //当前时间戳 var endtime = locksecends * 1000 + now; //结束时间戳 $.cookie("djsendtime", endtime); //将结束时间保存到cookie } $(btnObjId).addClass('disabled').attr('disabled', 'disabled').text( + locksecends + '秒后获取'); $('body').off('click', '#btnSendCode1SMS'); let timer = setInterval(function () { locksecends--; $(btnObjId).text(locksecends + '秒后获取'); if (locksecends <= 0) { //倒计时结束清除cookie值 $.cookie("djsendtime", null); $(btnObjId).removeClass('disabled').removeAttr('disabled').text('重新获取'); clearInterval(timer); } }, 1000); }; /*提交*/ function binding(){ //向后台发送处理数据 $.ajax({ type: 'post', //提交后台php文件 url: "{:url('index/index/res')}", // 得到表单提交的数据 data:$('#register').serialize() , dataType: 'json', //回调处理 success: function(data){ if (data.status ==1) { swal({ //弹出后台返回的消息 text: data.message, icon: "success", button: false }); }else{ swal({ text: data.message, icon: "warning", button: false }); } } }) } </script> </body> </html> ~~~ ![](https://box.kancloud.cn/38be8c92652e2c2480663e5d1da5a451_1386x630.png) # php 处理代码 ~~~ //发送邮件 public function email(){ $email = \think\facade\Request::post('phone'); require_once("../public/static/PHPMailer/src/PHPMailer.php"); require_once("../public/static/PHPMailer/src/SMTP.php"); // 实例化PHPMailer核心类 $mail = new \PHPMailer\PHPMailer(); // 是否启用smtp的debug进行调试 开发环境建议开启 生产环境注释掉即可 默认关闭debug调试模式 $mail->SMTPDebug = 1; // 使用smtp鉴权方式发送邮件 $mail->isSMTP(); // smtp需要鉴权 这个必须是true $mail->SMTPAuth = true; // 链接qq域名邮箱的服务器地址 $mail->Host = 'smtp.qq.com'; // 设置使用ssl加密方式登录鉴权 $mail->SMTPSecure = 'ssl'; // 设置ssl连接smtp服务器的远程服务器端口号 $mail->Port = 465; // 设置发送的邮件的编码 $mail->CharSet = 'UTF-8'; // 设置发件人昵称 显示在收件人邮件的发件人邮箱地址前的发件人姓名 $mail->FromName = 'Mrs gao'; // smtp登录的账号 QQ邮箱即可 $mail->Username = '461476246@qq.com'; // smtp登录的密码 使用生成的授权码 $mail->Password = 'rjipjeasbxaybgec'; // 设置发件人邮箱地址 同登录账号 $mail->From = '461476246@qq.com'; // 邮件正文是否为html编码 注意此处是一个方法 $mail->isHTML(true); // 设置收件人邮箱地址 $mail->addAddress($email); // 添加该邮件的主题 $mail->Subject = '邮件主题'; // 添加邮件正文 $mail->Body = '<h1>Hello World'.$this->codes().' </h1>'; $mail->SMTPOptions = array( 'ssl' => array( 'verify_peer' => false, 'verify_peer_name' => false, 'allow_self_signed' => true ) ); //邮件发送,必须写 $mail -> send() ; // 发送邮件 返回状态 return ['status'=>'1','message'=>'邮件发送成功']; } //定义一个六位验证码 public function codes($len =6){ $str = ''; for($i=0;$i<$len;$i++){ $str .= mt_rand(0,9); } session('codes',$str); session('time',time()+60); return $str; } //接受数据验证处理 public function res(Request $request){ $data =$request->param(); if ($data['codes'] !=\session('codes')){ return ['status'=>'1','message'=>'两次验证码不一致']; } if (time() >=\session('time')){ return ['status'=>'1','message'=>'验证码已经过期']; } //后面就是插入数据库处理 $ifno = Db::table('users')->data([ 'phone'=>$data['phone'], 'password'=>sha1($data['password']) ])->insert(); if ($ifno){ return ['status'=>'1','message'=>'注册成功']; } } ~~~