现在跟着我一起来做短信验证码开发前的准备工作，工作需要完成以下几点：定义目录结构。使用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
{
private static $errArr = array(
0 => '用户名不得为空',
1 => '密码不能为空',
2 => '2次输入的密码不一致',
3 => '手机验证码不正确',
4 => '验证码不得为空',
5 => '验证码填写不正确',
6 => '手机号码格式不正确',
7 => '手机号码必须填写',
8 => '请先获取短信验证码',
9 => '短信验证码不正确',
10 => '密码不得少于6位数',
11 => '验证的手机号码和当前的手机号码不一致'
);
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);
}
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;
}
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;
}
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;
}
public static function checkName($name)
{
if (empty($name)) {
return self::$errArr[0];
}
return true;
}
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;
}
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;
}
}
准备工作完成，后面的文章带大家进入正式开发阶段。
