这里我们废话不在多说直接来看代码，首先从前端开始往后看！
因为表单是通过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'=>'邮件发送失败！请检查邮箱地址是否存在'];
}
}以上就是邮箱发送验证码的所有内容了，还有验证的地方，我也就不写了，验证很简单，大家自由发挥吧！
