PHP 表单提交练习
本文最后更新于285天前,其中的信息可能已经过时,如有错误请在评论区悄悄告诉我~~~

HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人介绍</title>
</head>

<body>
    <h1>个人介绍</h1>
    <form action="./Personal_introduction.php" method="post" onsubmit="return check_form();">
        <table border="1">
            <tr>
                <td>姓名:</td> 
                <td><input type="text" id="username" name="username"></td>
                <td id="username_text">必须为6-10个字符</td>
            </tr>
            <tr>
                <td>性别:</td>
                <td>
                    <label><input type="radio" name="sex" value="男" checked="checked">男</label>
                    <label><input type="radio" name="sex" value="女">女</label>
                </td>
                <td></td>
            </tr>
            <tr>
                <td>年龄:</td>
                <td><input type="text" id="age" name="age"></td>
                <td id="age_text">取值为0-100</td>
            </tr>
            <tr>
                <td>个人密码:</td>
                <td><input type="password" id="pass" name="pass"></td>
                <td id="pass_text">必须为6-20个字符</td>
            </tr>
            <tr>
                <td>确认密码:</td>
                <td><input type="password" id="password" name="password"></td>
                <td id="password_text">与个人密码相同</td>
            </tr>
            <tr>
                <td>你的爱好:</td>
                <td>
                    <label><input type="checkbox" class="love" name="love[]" value="打游戏">打游戏</label>
                    <label><input type="checkbox" class="love" name="love[]" value="吃饭">吃饭</label>
                    <label><input type="checkbox" class="love" name="love[]" value="睡觉">睡觉</label>
                    <label><input type="checkbox" class="love" name="love[]" value="刷短视频">刷短视频</label>
                    <label><input type="checkbox" class="love" name="love[]" value="编程">编程</label>
                </td>
                <td id="love_text"></td>
            </tr>
            <tr>
                <td>你最喜欢的颜色:</td>
                <td>
                    <select id="colour" name="colour">
                        <option value="0">未选择</option>
                        <option value="1">红色</option>
                        <option value="2">绿色</option>
                    </select>
                </td>
                <td id="colour_text"></td>
            </tr>
            <tr>
                <td>个人介绍:</td>
                <td><textarea id="introduce" name="introduce"></textarea></td>
                <td id="introduce_text">不能为空</td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="submit" value="提交" id="submit" name="submit">
                    <input type="reset" value="重置">
                </td>
                <td></td>
            </tr>
        </table>
    </form>
    <script src="./Personal_introduction.js"></script>
</body>

</html>

js代码

//姓名验证
let username = document.getElementById("username");
let username_text = document.getElementById("username_text");

username.onblur = function() {
    if (username.value.length > 5 && username.value.length < 21) {
        username_text.innerText = " √"
        username_text.style.color = "green";
    }
    else {
        username_text.innerText = " × 必须为6-10个字符"
        username_text.style.color = "red";
    }
}
username.onclick = function() {
    username_text.innerText = "必须为6-10个字符";
    username_text.style.color = "black";
}

//年龄判断
let age = document.getElementById("age");
let age_text = document.getElementById("age_text");

age.onblur = function() {
    if (!(/(^[0-9]\d*$)/.test(age.value)) && age.value != "") {
        age_text.innerText = " × 必须为正整数"
        age_text.style.color = "red";
    }
    else if (age.value > 0 && age.value < 101 && age.value != "") {
        age_text.innerText = " √"
        age_text.style.color = "green";
    }
    else {
        age_text.innerText = " × 取值为0-100"
        age_text.style.color = "red";
    }
}
age.onclick = function() {
    age_text.innerText = "取值为0-100";
    age_text.style.color = "black";
}

//密码判断
let pass = document.getElementById("pass");
let password = document.getElementById("password");
let pass_text = document.getElementById("pass_text");
let password_text = document.getElementById("password_text");

pass.onblur = function() {
    if (pass.value.length < 6 || pass.value.length > 20) {
        pass_text.innerText = " × 必须为6-20个字符"
        pass_text.style.color = "red";
    }
    else {
        pass_text.innerText = " √"
        pass_text.style.color = "green";
    }
}
pass.onclick = function() {
    pass_text.innerText = "必须为6-20个字符";
    pass_text.style.color = "black";
}
password.onblur = function() {
    if (pass.value != password.value) {
        password_text.innerText = " × 两次密码输入不一致";
        password_text.style.color = "red";
    }
    else if (pass.value == password.value && password.value != "") {
        password_text.innerText = " √";
        password_text.style.color = "green";
    }
}
password.onclick = function() {
    password_text.innerText = "与个人密码相同";
    password_text.style.color = "black";
}

//个人介绍判断
let introduce = document.getElementById("introduce");
let introduce_text = document.getElementById("introduce_text");

introduce.onblur = function() {
    if (introduce.value == "") {
        introduce_text.innerText = " × 不能为空";
        introduce_text.style.color = "red";
    }
    else {
        introduce_text.innerText = " √";
        introduce_text.style.color = "green";
    }
}
introduce.onclick = function() {
    introduce_text.innerText = "不能为空";
    introduce_text.style.color = "black";
}

//爱好选择判断
let love = document.getElementsByClassName("love");
let love_text = document.getElementById("love_text");
let love_L = 0;

for (let i = 0; i < love.length; i++) {
    love[i].onclick = function() {
        if (love[i].checked == true) {
            love_L = love_L + 1;
        }
        else if (love[i].checked == false) {
            love_L = love_L - 1;
        }
        if (love_L == 0) {
            love_text.innerText = " × 至少选择一项";
            love_text.style.color = "red";
        }
        else if (love_L != 0) {
            love_text.innerText = "";
            love_text.style.color = "black";
        }
    }
}

//颜色选择判断
let colour = document.getElementById("colour");
let colour_text = document.getElementById("colour_text");

colour.onclick = function() {
    if (colour.selectedIndex == 0) {
        colour_text.innerText = " × 请选择你喜欢的颜色";
        colour_text.style.color = "red";
    }
    else if (colour.selectedIndex != 0) {
        colour_text.innerText = "";
        colour_text.style.color = "black";
    }
}

//提交按钮判断
let submit = document.getElementById("submit");

function check_form() {
    if (username.value.length > 5 && username.value.length < 21) {
        username_text.innerText = " √"
        username_text.style.color = "green";
    }
    else {
        username_text.innerText = " × 必须为6-10个字符"
        username_text.style.color = "red";
        return false;
    }
    if (!(/(^[0-9]\d*$)/.test(age.value)) && age.value != "") {
        age_text.innerText = " × 必须为正整数"
        age_text.style.color = "red";
        return false;

    }
    else if (age.value > 0 && age.value < 101 && age.value != "") {
        age_text.innerText = " √"
        age_text.style.color = "green";
    }
    else {
        age_text.innerText = " × 取值为0-100"
        age_text.style.color = "red";
        return false;
    }
    if (pass.value.length < 6 || pass.value.length > 20) {
        pass_text.innerText = " × 必须为6-20个字符"
        pass_text.style.color = "red";
        return false;
    }
    else {
        pass_text.innerText = " √"
        pass_text.style.color = "green";
    }
    if (pass.value != password.value) {
        password_text.innerText = " × 两次密码输入不一致";
        password_text.style.color = "red";
        return false;
    }
    else if (pass.value == password.value && password.value != "") {
        password_text.innerText = " √";
        password_text.style.color = "green";
    }
    if (love_L == 0) {
        love_text.innerText = " × 至少选择一项";
        love_text.style.color = "red";
        return false;
    }
    if (colour.selectedIndex == 0) {
        colour_text.innerText = " × 请选择你喜欢的颜色";
        colour_text.style.color = "red";
        return false;
    }
    else if (colour.selectedIndex != 0) {
        colour_text.innerText = "";
        colour_text.style.color = "black";
    }
    if (introduce.value == "") {
        introduce_text.innerText = " × 不能为空";
        introduce_text.style.color = "red";
        return false;
    }
    else {
        introduce_text.innerText = " √";
        introduce_text.style.color = "green";
    }
    return true;
}

php代码

<?php
$username=$_POST['username'];
$sex=$_POST['sex'];
$age=$_POST['age'];
$pass=$_POST['pass'];
$password=$_POST['password'];
$love=implode(',',$_POST['love']);
$colour=$_POST['colour'];
$introduce=$_POST['introduce'];

echo "你的名字是:{$username} <br />";
echo "你的性别是:{$sex} <br />";
echo "你的年龄是:{$age} <br />";
echo "你的密码是:{$password} <br />";
echo "你的爱好是:{$love} <br />";
echo "你的颜色是:{$colour} <br />";
echo "你的自我介绍是:{$introduce} <br />";

?>

有错误欢迎在评论区提出~~~

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

发送评论 编辑评论


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