本文最后更新于278天前，其中的信息可能已经过时，如有错误请在评论区悄悄告诉我~~~
一、Session
验证码的验证：
1、数据从哪里来？
- 数据一：验证码生成文件（yzm.php）中产生的字符串: $str
- 数据二：表单中的输入框：$_POST[‘useryzm’]
2、在哪里验证？
- 后端验证（.php）
3、怎么验证？
为了满足用户不区分大小写，将用户输入的数据转成全大写，然后再跟生成验证进行比对
4、结果怎么处理？
- 结果一：验证通过->注册成功
- 结果二:验证不通过->输入错误，重新输入（其余数据自动回填），注册失败
5、Session：
服务器提供网站服务时，网站开始运行时，自动生成seesionid（一次会话中唯一），关闭网站时，自动消除。
6、seesionid数据存储在服务器
作用：当数据存在于不同的PHP文件中，但是又要统一拿来使用时，就需要用到session
使用：
需要在代码首行加入开关：session_start()
$_SESSION[]，键和值都是自定义的
$_SESSION[‘yzm’] = $str // 由于str只能在yzm.php文件中使用，所以需要把它存入session中成为公用
二、小练习
目录结构
要使用一个字体文件，可以在系统盘/windows/fonts里找到一个名为Times New Roman的文件，将他复制到与你代码同级的目录下，重命名为times.ttf，或者点击下载放到对应位置
先使用HTML+CSS写个页面
HTML 代码
zhuce.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="zhuce.css">
<script src="zhuce.js"></script>
</head>
<body>
<div class="divshang"></div>
<div class="divzhang">
<form id="form1" name="form1" method="post" action="zhuce.php" onsubmit="return validate()">
<table width="600" align="center" cellspacing="0" cellpadding="0">
<tr>
<td class="td1"><span class="star">*</span>邮箱地址：</td>
<td class="td2">
<input name="emailaddr" type="text" id="emailaddr" /> @163.com
<p>6~18个字符，包括字母、数字、下划线、字母开头、字母或者数字结尾</p>
</td>
</tr>
<tr>
<td class="td1"><span class="star">*</span>密码：</td>
<td class="td2">
<input name="pass" type="password" id="pass" />
<p>6~16个字符，包括字母、数字</p>
</td>
</tr>
<tr>
<td class="td1"><span class="star">*</span>确认密码：</td>
<td class="td2">
<input name="password" type="password" id="password" />
<p>再次输入密码</p>
</td>
</tr>
<tr>
<td class="td1"><span class="star">*</span>手机号码：</td>
<td class="td2">
<input name="phoneno" type="text" id="phoneno" />
<p>密码遗忘或者被盗时，可通过手机短信取回密码</p>
</td>
</tr>
<tr>
<td class="td1"><span class="star">*</span>验证码：</td>
<td class="td2">
<input name="useryzm" type="text" id="ver_code" />
<img src="yzm.php" name="yzm" id="yzm" align="top"/>
<p>请输入图片中的字符<span onclick="yzmupdate()">看不清楚? 换一张</span></p>
</td>
</tr>
<tr>
<td class="td1"> </td>
<td class="td2">
<input type="submit" value="立即注册" />
</td>
</tr>
</table>
</form>
</div>
<div class="divxia"></div>
</body>
</html>CSS 代码
zhuce.css
body{
width: 965px;
padding: 0;
margin: 100px auto;
border-style:solid;
}
.divshang {
width: 965px;
height: 55px;
padding: 0;
margin: 0 auto;
margin-bottom: 20px;
background-color: #3FADFF;
}
.divzhong {
width: 965px;
height: auto;
padding: 40px 0px 0px;
margin: 0 auto;
}
.divxia {
width: 965px;
height: 15px;
padding: 0px;
margin: 0 auto;
}
.star{
color: red;
margin-right: 5px;
}
table .td1 {
width: 150px;
height: 60px;
font-size: 12pt;
text-align: right;
vertical-align: top;
}
table .td2
{
width: 450px;
font-size: 10pt;
vertical-align: top;
}
table .td2 p {
margin: 8px 0 0 0;
color: #29D7E0;
}
table .td2 span {
text-decoration: underline;
color: #00f;
cursor: pointer;
}
#pass,#password,#phoneno {
width: 320px;
border: 1px solid #aaf;
border-radius: 2PX;
}
#emailaddr,#ver_code {
width: 220px;
border: 1px solid #aaf;
border-radius: 2PX;
}大致效果：
然后用JS在前端写点验证，由于老师要求使用Acall码来做验证，所以这里有两种方案
JS 代码
zhuce.js
Acall码版
不太会用Acall码来做验证，所以仅供参考！！！
function validate(){
var email = document.getElementById("emailaddr").value;
var pass = document.getElementById("pass").value;
var password = document.getElementById("password").value;
var phoneno = document.getElementById("phoneno").value;
if(email.length < 6 || email.length > 19){
alert("邮箱长度不正确")
return false;
}
if(email.charCodeAt(0) < 65 || email.charCodeAt(0) > 90 && email.charCodeAt(0) < 97 || email.charCodeAt(0) > 122){
alert("邮箱应以首字母开头")
return false;
}
for(i = 0; i < email.length; i++){
if(email.charCodeAt(i) < 48 || email.charCodeAt(i) > 57 && email.charCodeAt(i) < 65 || email.charCodeAt(i) > 90 && email.charCodeAt(i) != 95 && email.charCodeAt(i) < 97 || email.charCodeAt(i) > 122){
alert("邮箱中包含非法字符")
return false;
}
}
if(email.charCodeAt(email.length - 1) < 48 || email.charCodeAt(email.length - 1) > 57 && email.charCodeAt(email.length - 1) < 65 || email.charCodeAt(email.length - 1) > 90 && email.charCodeAt(email.length - 1) < 97 || email.charCodeAt(email.length - 1) > 122 ){
alert("邮箱应以字母或数字结尾")
return false;
}
if(pass.length < 6 || pass.length > 12){
alert("密码长度不正确")
return false;
}
for(i = 0; i < pass.length; i++){
if(pass.charCodeAt(i) < 48 || pass.charCodeAt(i) > 57 && pass.charCodeAt(i) < 65 || pass.charCodeAt(i) > 90 && pass.charCodeAt(i) < 97 || pass.charCodeAt(i) > 122 ){
alert("密码中包含非法字符")
return false;
}
}
if(pass != password){
alert("两次密码输入不一致")
return false;
}
if(phoneno.length != 11){
alert("手机号码长度不正确")
return false;
}
for(i = 0; i < phoneno.length; i++){
if(phoneno.charCodeAt(0) != 49 || (phoneno.charCodeAt(1) != 51 && phoneno.charCodeAt(1) != 53 && phoneno.charCodeAt(1) != 55 && phoneno.charCodeAt(1) != 56) || phoneno.charCodeAt(i) < 48 || phoneno.charCodeAt(i) > 57){
alert("手机号码格式非法")
return false;
}
}
}
function yzmupdate(){
document.yzm.src="yzm.php?t=" + Math.random();
}
正则表达式版
function validate(){
let email = document.getElementById("emailaddr").value;
let pass = document.getElementById("pass").value;
let password = document.getElementById("password").value;
let phoneno = document.getElementById("phoneno").value;
let phone_test = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
if(email.length < 6 || email.length > 19){
alert("邮箱长度不正确")
return false;
}
if(/^[^a-zA-Z]/.test(email)){
alert("邮箱应以字母开头")
return false;
}
if(/[^a-zA-Z0-9_]/.test(email)){
alert("邮箱中包含非法字符")
return false;
}
if(/[^A-Za-z0-9]$/.test(email)){
alert("邮箱应以字母或数字结尾")
return false;
}
if(pass.length < 6 || pass.length > 12){
alert("密码长度不正确")
return false;
}
if(/[^a-zA-Z0-9]/.test(pass)){
alert("密码中包含非法字符")
return false;
}
if(pass != password){
alert("两次密码输入不一致")
return false;
}
if(!phone_test.test(phoneno)){
alert("手机号码格式非法")
return false;
}
}
function yzmupdate(){
document.yzm.src="yzm.php?t=" + Math.random();
}
PHP 代码
验证码生成
yzm.php
<?php
session_start();
ob_clean();
header('Content-type:image/png');
$image_w = 100;
$image_h = 25;
$number = range(0,9);
$character = range("Z" , "A");
$result = array_merge($number , $character);
$string = "";
$len = count($result);
for ($i = 0; $i < 4; $i++){
$index = rand(0, $len - 1);
$string = $string.$result[$index];
}
$img1 = imagecreatetruecolor($image_w,$image_h);
$white = imagecolorallocate($img1, 255, 255, 255);
$black = imagecolorallocate($img1, 0, 0, 0);
imagefill($img1, 0, 0, $white);
$fontfile = realpath('times.ttf');
for ($i = 0; $i < 100; $i++) {
imagesetpixel($img1, rand(0, $image_w-1), rand(0, $image_h-1), $black);
}
for ($i = 0; $i < 2; $i++) {
imageline($img1, mt_rand(0, $image_w-1), mt_rand(0, $image_h-1), mt_rand(0, $image_w-1), mt_rand(0, $image_h-1), $black);
}
for ($i = 0; $i <4; $i++) {
$x = $image_w / 4 * $i + 8;
$y = mt_rand(16, 19);
$color = imagecolorallocate($img1, mt_rand(0, 180), mt_rand(0,180),mt_rand(0,180));
imagettftext($img1, 14, mt_rand(-45, 45), $x, $y, $color, $fontfile, $string[$i]);
}
imagepng($img1);
imagedestroy($img1);
$_SESSION['string'] = $string;
?>页面打印输出
zhuce.php
<?php
session_start();
$emailaddr = $_POST['emailaddr'];
$password = $_POST['password'];
$phoneno = $_POST['phoneno'];
$useryzm = $_POST['useryzm'];
$yzmchar = $_SESSION['string'];
if(strtoupper($useryzm) == $yzmchar){
echo "尊敬的用户您好，您注册的信息如下。</br />";
echo "邮箱地址是：{$emailaddr}</br />";
echo "密码是：{$password}</br />";
echo "手机号是：{$phoneno}</br />";
}
else if(strtoupper($useryzm) != $yzmchar){
include "zhuce.html";
echo "<script>";
echo "document.getElementById('emailaddr').value = '{$emailaddr}';";
echo "document.getElementById('pass').value = '{$password}';";
echo "document.getElementById('password').value = '{$password}';";
echo "document.getElementById('phoneno').value = '{$phoneno}';";
echo "alert('验证码输入不正确')";
echo "</script>";
}
?>
