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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34518793/article/details/78590107

最近在开发一个登录模块，需要用到短信验证码功能，由于技术有限，简单做了一个比较粗糙的，写下来备忘。需要用到：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" name="user_mail" 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);
?>

完。
体验页面：已下线（本人短信宝账户余额不足，冲不起钱了，再见）
原文地址：http://blog.xuxiangbo.com/im-19.html