待發短信
在線客服
4001-021-502
9:00-21:00
現在跟著我一起來做短信驗證碼開發前的準備工作，工作需要完成以下幾點：定義目錄結構。使用html+css對案例的頁面進行布局。創建配置文件。編寫開發中的幫助文件和數據驗證文件。好了，開工?。?/p>
目錄結構定義工作：
先創建目錄，需要一個項目目錄，配置文件目錄，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類
微信類
