待发短信
在线客服
4001-021-502
9:00-21:00
现在跟着我一起来做短信验证码开发前的准备工作，工作需要完成以下几点：定义目录结构。使用html+css对案例的页面进行布局。创建配置文件。编写开发中的帮助文件和数据验证文件。好了，开工！！
目录结构定义工作：
先创建目录，需要一个项目目录，配置文件目录，js文件目录，字体文件目录，工具文件目录。定义完成的目录结构如下：
sms — 项目目录
sms/config — 配置文件目录
sms/js — javascript文件目录
sms/font — 字体文件目录
sms/tool — 工具文件目录
使用html+css对案例的页面进行布局：
在项目目录sms下创建register.php文件，用于模拟用户注册的界面。其代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
<!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这个配置文件，并且在文件中配置自己的短信接口账号和密码，在案例中使用的是短信宝的接口，所以直接配置短信宝的账号密码就好了。 如果没有短信宝的账号和面，可以去他们的官网注册一个，注册还免费送短信哦。配置的代码如下：
|
1
2
3
4
5
|
<?phpreturn array( 'smsbao_name' => '您的短信宝账号', 'smsbao_password' => '您的短信宝密码', ); |
工具文件创建： 这里我们需要创建1个工具文件，用于验证填写的模拟注册信息是否正确的。 在sms/tool目录下创建CheckTool.php 用于负责数据验证，代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
|
<?phpclass 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类
微信类
