ajax + 短信宝 实现手机验证码

2017-11-21 20:13:42来源:CSDN作者:qq_34518793人点击

分享

最近在开发一个登录模块,需要用到短信验证码功能,由于技术有限,简单做了一个比较粗糙的,写下来备忘。需要用到:Jq-ajax、php、短信宝

HTML部分:

<div class="login">    <div class="login-head">        <p>注册用户</p>        <p>成为IM的使用者</p>    </div>    <div class="login-main">        <p class="log-err">&nbsp;</p>        <input type="text" name="user_name" placeholder="用户名" autocomplete="off" />        <input type="password" name="user_pass" placeholder="密码" autocomplete="off" />        <!--<input type="text" placeholder="邮箱 (选填)" autocomplete="off" />-->        <input type="text" name="user_tel" placeholder="手机" autocomplete="off" class="vcode" />        <button class="getcode">获取验证码</button>        <input type="text" placeholder="短信验证码" autocomplete="off" />        <button class="submit">注册</button>    </div>    <div class="login-qrcode">        <img src="../img/qrcode.png" />    </div>    <div class="login-link">        <a href="../login/">登录账户</a>        <a href="">用户协议</a>    </div></div>

向服务器发送验证码:

$(".getcode").click(function(){    var _input = $(".login-main").find("input");    if(_input.eq(2).val() == ''){        $(".log-err").text("请输入手机号码");        return false;    }else{        var tel_num = _input.eq(2).val();        show_num = Math.round(Math.random()*1000000);        while(show_num < 99999){            show_num = Math.round(Math.random()*1000000);        }        $.ajax({            type: "post",            url: "sendmsg.php",            data: "tel_num=" + tel_num + "&" + "show_num=" + show_num,            beforeSend: function(){                $(".getcode").text("正在发送...");            },            success: function(data){ //ajax执行成功回调函数,判断发送验证码是否成功                if(data){                    $(".getcode").text("验证码已发送");                }else{                    $(".getcode").text("验证码发送失败");                }            }        });    }})

短信宝API:

<?php    $statusStr = array(    "0" => "发送成功",    "-1" => "发送失败"    );    $smsapi = "http://api.smsbao.com/";    $user = "*你的账号***"; //短信平台帐号    $pass = md5("你的密码 MD5加密"); //短信平台密码    $content="【IM】欢迎您的注册,您的验证码是".$_POST['show_num'];//要发送的短信内容    $phone = $_POST['tel_num'];//要发送短信的手机号码    $sendurl = $smsapi."sms?u=".$user."&p=".$pass."&m=".$phone."&c=".urlencode($content);    $result =file_get_contents($sendurl) ;    echo $statusStr[$result];?>

短信宝API详细文档:短信宝API

客户端验证:

$(".submit").click(function(){$(".log-err").text("");    var _input = $(".login-main").find("input");    var vcode_num = $(".show-vcode").text();    if(_input.eq(0).val() == ''){        $(".log-err").text("请输入用户名");        return false;    }else if(_input.eq(1).val() == ''){        $(".log-err").text("请输入密码");        return false;    }else if(_input.eq(2).val() == ''){        $(".log-err").text("请输入手机号码");        return false;    }else if(_input.eq(3).val() == ''){        $(".log-err").text("请输入验证码");        return false;    }else{        if(_input.eq(3).val() != show_num){            $(".log-err").text("验证码错误");            return false;        }else{            var username = _input.eq(0).val();            var userpass = _input.eq(1).val();            var usertel = _input.eq(2).val();            $.ajax({            type: "post",            url: "reg.php",            data: "au_name=" + username + "&au_pass=" + userpass + "&au_tel=" + usertel,            beforeSend: function(){                $(".submit").text("正在注册...");            },            success: function(data){ //ajax执行成功回调函数,判断是否登陆成功                if(data){                    alert("注册成功");                    window.location.href = "../login/";                }else{                    alert("注册失败");                    window.location.href = "index.php";                }            }        });        }    }})

验证通过注册用户:

<?php    $au_name = $_POST['au_name'];    $au_pass = $_POST['au_pass'];    $au_tel = $_POST['au_tel'];    include '../inc/mysqli.php';    $sql = "INSERT INTO im_au (au_name,au_pass,au_tel) VALUES ('$au_name','$au_pass','$au_tel')";    $res = $mysqli -> query($sql);    $res_sel = $mysqli -> query("SELECT * FROM im_au where au_name = '$au_name' and au_pass = '$au_pass'");    $row = $res_sel -> fetch_array();    if($row){        echo true;    }else{        echo false;    }    mysqli_close($mysqli);?>

完。
体验页面:已下线(本人短信宝账户余额不足,冲不起钱了,再见)

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台