待发短信

在线客服
产品支持 短信宝客服
合作渠道 渠道合作
服务咨询

4001-021-502

工作时间

9:00-21:00

短信宝短信验证码开发教程 – 2.准备篇


现在跟着我一起来做短信验证码开发前的准备工作,工作需要完成以下几点:定义目录结构。使用html+css对案例的页面进行布局。创建配置文件。编写开发中的帮助文件和数据验证文件。好了,开工!!

目录结构定义工作: 

先创建目录,需要一个项目目录,配置文件目录,js文件目录,字体文件目录,工具文件目录。定义完成的目录结构如下: 

sms — 项目目录 

sms/config — 配置文件目录 

sms/js — javascript文件目录 

sms/font — 字体文件目录 

sms/tool — 工具文件目录

使用html+css对案例的页面进行布局: 

在项目目录sms下创建register.php文件,用于模拟用户注册的界面。其代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {margin:0; padding:0;}
        h1 {margin:30px 0 25px 0;}
        .form-input {margin-bottom:10px;}
        .form-input input {width:200px; height:25px;}
        .form-input button {width:60px; height:25px;}
        #main {width:500px; margin:0 auto;}
        #vcode {width:80px;}

        #phone_code {width:80px;}
        .code_label {position:relative;}
        .code_label img {position:absolute; top:-5px; left:185px; cursor: pointer;}
        .code_label button {width:90px; cursor: pointer;}
    </style>
    <script src="js/jquery.js"></script>
</head>
<body>
<div id="main">
    <h1>用户注册</h1>
    <form method="post" action="register.php">
        <div class="form-input">
            <label>
                手机号码&emsp;
                <input type="text" name="phone" value=""/>
                <p id="phone_err" class="errmsg" style="margin:5px 0 0 88px; color:red;"></p>
            </label>
        </div>
        <div class="form-input">
            <label>
                密&emsp;&emsp;码&emsp;
                <input type="password" name="password" value=""/>
                <p id="phone_err" class="errmsg" style="margin:5px 0 0 88px; color:red;"></p>
            </label>
        </div>
        <div class="form-input">
            <label>
                确认密码&emsp;
                <input type="password" name="repassword" value=""/>
            </label>
        </div>

        <div class="form-input">
            <label class="code_label">
                验&ensp;证&ensp;码&emsp;
                <input id="vcode" type="text" name="vcode" value=""/>
                <img id="code_img" src=""/>
                <p id="code_err" class="errmsg" style="margin:5px 0 0 88px; color:red;"></p>
            </label>
        </div>
        <div class="form-input">
            <label class="code_label">
                手机验证码
                <input id="phone_code" type="text" name="code" value=""/>
                <button type="button" id="get_code">获取验证码</button>
                <p id="phone_err" class="errmsg" style="margin:5px 0 0 88px; color:red;"></p>
            </label>
        </div>
        <input type="hidden" name="is_send" value="1"/>
        <div class="form-input">
            <label>
                <button type="submit">提 交</button>
            </label>
        </div>
    </form>
</div>

</body>
</html>

js文件和字体文件: 

在sms/js目录中添加jquery库文件,在sms/font目录中添加consola.ttf字体文件。这2个文件在我代码案例中已经提供,可以拿来直接使用。也可以到网上去下载。

配置文件的使用: 

在sms/config目录下创建config.php这个配置文件,并且在文件中配置自己的短信接口账号和密码,在案例中使用的是短信宝的接口,所以直接配置短信宝的账号密码就好了。
如果没有短信宝的账号和面,可以去他们的官网注册一个,注册还免费送短信哦。配置的代码如下:

<?php
return array(
    'smsbao_name' => '您的短信宝账号',
    'smsbao_password' => '您的短信宝密码', 
);

 

工具文件创建: 

这里我们需要创建1个工具文件,用于验证填写的模拟注册信息是否正确的。 

在sms/tool目录下创建CheckTool.php 用于负责数据验证,代码如下:

<?php
class CheckTool
{
    /**
     * @var array 错误提示代码
     */
    private static $errArr = array(
        0 => '用户名不得为空',
        1 => '密码不能为空',
        2 => '2次输入的密码不一致',
        3 => '手机验证码不正确',
        4 => '验证码不得为空',
        5 => '验证码填写不正确',
        6 => '手机号码格式不正确',
        7 => '手机号码必须填写',
        8 => '请先获取短信验证码',
        9 => '短信验证码不正确',
        10 => '密码不得少于6位数',
        11 => '验证的手机号码和当前的手机号码不一致'
    );

    /**
     * 数据执行验证的总接口
     * @param $data
     * @return bool
     */
    public static function exec($data)
    {
        $errType['phone'] = self::checkPhone($data['phone']);
        $errType['password'] = self::checkPassword($data['password'], $data['repassword']);
        $errType['code'] = self::checkSmsCode($data['code']);

        return self::checkErr($errType);
    }

    /**
     * 返回错误码,如果验证没有错误,则返回true
     * @param $errorData
     * @return bool
     */
    public static function checkErr($errorData)
    {
        $cnt = count($errorData);
        $postOk = 0;

        foreach ($errorData as $key => $item) {
            if (true === $item) {
                $errorData[$key] = '';
                ++$postOk;
            }
        }

        return $cnt == $postOk ? true : $errorData;
    }

    /**
     * 验证短信发送的验证码是否正确
     * @param $code
     * @return bool|mixed
     */
    public static function checkSmsCode($code)
    {
        if (!isset($_SESSION['sms_code']) || empty($_SESSION['sms_code'])) {
            return self::$errArr[8];
        }

        if (0 !== strcmp($_SESSION['sms_code'], $code)) {
            return self::$errArr[9];
        }

        return true;
    }

    /**
     * 验证密码的正确性,以及2次输入是否一致。
     * @param $password
     * @param $repassword
     * @return bool|mixed
     */
    public static function checkPassword($password, $repassword)
    {
        if (empty($password)) {
            return self::$errArr[1];
        }

        if (!is_string($password) || strlen($password) < 6) {
            return self::$errArr[10];
        }

        if (0 !== strcmp($password, $repassword)) {
            return self::$errArr[2];
        }

        return true;
    }

    /**
     * 验证用户名
     * @param $name
     * @return bool|mixed
     */
    public static function checkName($name)
    {
        if (empty($name)) {
            return self::$errArr[0];
        }

        return true;
    }


    /**
     * 验证码的验证
     * @param $code
     * @return bool|mixed
     */
    public static function checkCode($code)
    {
        if (empty($code)) {
            return self::$errArr[4];
        }

        session_start();
        $code = strtolower($code);
        $sessionCode = strtolower($_SESSION['code']);

        if (0 !== strcmp($code, $sessionCode)) {
            return self::$errArr[5];
        }

        return true;
    }

    /**
     * 手机号码验证规则
     * @param $phone
     * @return bool|mixed
     */
    public static function checkPhone($phone)
    {
        if (empty($phone)) {
            return self::$errArr[7];
        }

        $isOk = preg_match('/^13[0-9]{1}[0-9]{8}$|15[0189]{1}[0-9]{8}$|189[0-9]{8}$/', $phone);

        if (!$isOk) {
            return self::$errArr[6];
        }

        if (isset($_SESSION['send_phone'])) {
            if (0 !== strcmp($_SESSION['send_phone'], $phone)) {
                return self::$errArr[11];
            }
        }

        return true;
    }
}

准备工作完成,后面的文章带大家进入正式开发阶段。
 

开源插件

最新更新

电商类

CMS类

微信类

文章标签