PHP 的邮箱注册小练习
本文最后更新于176天前,其中的信息可能已经过时,如有错误请在评论区悄悄告诉我~~~

一、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">&nbsp;</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>";
    }
?>

此文章是我在学校上课时的一些笔记,有错误还请多多包涵,仅供参考
作者:404_502
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0协议。转载请注明文章地址及作者
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇