本文最后更新于384天前,其中的信息可能已经过时,如有错误请在评论区悄悄告诉我~~~
一、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>";
}
?>