这里我们废话不在多说直接来看代码,首先从前端开始往后看!
因为表单是通过layui组件搭建起来的所以直接复制过去可能会存在没有样式的现象
这里仅仅就是HTML代码
代码一段:(前端样式)
<div class="layui-form-item"> <label class="layadmin-user-login-icon layui-icon layui-icon-login-qq" for="LAY-user-login-cellphone"></label> <input type="text" name="email" id="LAY-user-login-cellphone" lay-verify="email" placeholder="邮箱" class="layui-input"> </div> <div class="layui-form-item"> <div class="layui-row"> <div class="layui-col-xs7"> <label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="LAY-user-login-vercode"></label> <input type="text" name="vercode" id="LAY-user-login-vercode" lay-verify="required" placeholder="验证码" class="layui-input"> </div> <div class="layui-col-xs5"> <div style="margin-left: 10px;"> <button type="button" class="layui-btn layui-btn-primary layui-btn-fluid" id="verification"> 获取验证码 </button> </div> </div> </div> </div>
样式图:
上面只是样式表单代码,下面是jQuery的代码块
$('#verification').click(function () { var email = $('#LAY-user-login-cellphone').val() var rule = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/; if (rule.test(email)) {// 通过正则来匹配邮箱地址是否符合 $.post("{:url('User/verification')}", { // 提交到的接口地址 也就是发送邮件的后台地址 'email': email }, function (res) { if (res.code == 0) { $('#verification').attr('id', 'sail_go'); var max = 120; //开启定时 var timer = setInterval(function sub() { max--; $('#sail_go').html(max); if (max < 1) { $('#sail_go').attr('id', 'verification'); $('#verification').html('获取验证码'); clearInterval(timer); } }, 1000); layer.alert(res.msg, {icon: 6}) } else { layer.alert(res.msg, {icon: 5}) } }) } else { return layer.msg('请填写正确邮箱地址'); } })
效果图:
接下来就是后台的程序代码了,我这里用的是tp5.1的框架
首先这个是配置发送邮件的方法
public function sendEmail($data) { $mail = new PHPMailer(); $mail->IsSMTP(); // 启用SMTP $mail->Host = 'smtp.qq.com'; //SMTP服务器 以qq邮箱为例子 $mail->Port = 465; //邮件发送端口 $mail->SMTPAuth = true; //启用SMTP认证 $mail->SMTPSecure = "ssl"; // 设置安全验证方式为ssl $mail->CharSet = "utf-8"; //字符集 $mail->Encoding = "base64"; //编码方式 $mail->Username = '244103592@qq.com'; //发件人邮箱 $mail->Password = 'crpqn*****iybhbb'; //发件人密码 ==>重点:是授权码,不是邮箱密码 $mail->From = '244103592@qq.com'; $mail->Subject = '来自出处吧的邮箱验证码'; //邮件标题 $mail->FromName = '出处吧'; //发件人姓名 if ($data && is_array($data)) { $mail->AddAddress($data['email']); //添加收件人 $mail->IsHTML(true); //支持html格式内容 $mail->Body = $data['content']; //邮件主体内容 //发送成功就删除 if ($mail->Send()) { //echo "Mailer Error: ".$mail->ErrorInfo;// 输出错误信息,用以邮件发送不成功问题排查 return 1; } else { return -1; } } }
这里发送验证码的地方直接看代码吧
public function verification() { // 接受到提交过来的邮箱 $data = Request::param(); // 再来进行邮箱的验证 看一下数据库中是否存在相同 $email = $data['email']; $email = UsersModel::where('email', "$email")->find(); if ($email == true) { // 当存在对应数据时直接返回提示信息,不存在直接跳过向下继续 return ['code' => 1, 'msg' => '邮箱重复!']; } // 这里就是***4位的验证码 $arr = array_merge(range('a', 'b'), range('A', 'B'), range('0', '9')); shuffle($arr); $arr = array_flip($arr); $arr = array_rand($arr, 4); $res = ''; foreach ($arr as $v) { $res .= $v; } // 将验证码存储到session中(个人感觉这里很low) Session::set('vercode',$res); // 创建邮件的模板(包含验证码) $data['content'] = "<h2>客官大人:</h2><br><p>感谢您在我们<b>出处吧</b>平台注册了账户以下是您的验证码</p><br><p>" . $res . "</p><br><p>感谢您的 支持!请填写完整验证码!再进行注册~</p>"; // 实现发送邮件操作 if ($this->sendEmail($data)) { return ['code'=>0,'msg'=>'邮件发送成功!请查收并填写验证码','data'=>$res]; } else { return ['code'=>1,'msg'=>'邮件发送失败!请检查邮箱地址是否存在']; } }
以上就是邮箱发送验证码的所有内容了,还有验证的地方,我也就不写了,验证很简单,大家自由发挥吧!