現在跟着我一起來做短信驗證碼開發前的準備工作，工作需要完成以下幾點：定義目錄結構。使用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>
手機號碼 
<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>
密  碼 
<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>
確認密碼 
<input type="password" name="repassword" value=""/>
</label>
</div>
<div class="form-input">
<label class="code_label">
驗 證 碼 
<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;
}
}準備工作完成，後面的文章帶大家進入正式開發階段。