HTML注册表单跳转个人页数据回显与校验问题排查修复

算力阿峰

2026-9-3

注册表单问题修复方案

问题根因汇总

表单提交拦截失效：提交事件绑定方式错误，passvalues()函数的return false没有关联到表单提交事件，同时存在标签语法错误，导致原生required校验未生效，必填项留空也会跳转。
字段展示失败：
1. localStorage存储和读取的key不匹配：注册原因存储key为textareavalue，个人页读取时错写为textArea
2. 密码、性别字段在个人页缺少对应展示容器，性别字段完全未编写取值存储逻辑
3. 多行输入框写法错误：错将<textarea>写为<input type="textarea">，导致输入值无法正常获取
附加语法错误：存在重复<body>标签、CSS属性background color缺连字符、font-size单位错写为25x、样式规则缺闭合大括号、标签属性引号不匹配等问题，会导致样式和部分功能异常。

修正后代码

注册页（registration.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Register</title>
    <style type="text/css">
        ul {list-style-type: none; margin: 0; padding: 0; background-color: rgb(42,157,143); overflow: hidden;}
        li{float: left;} 
        li a:link{display: block; color: black; padding: 10px; text-decoration: none;}
        li a:visited{color: orange;}
        li a:hover {background-color: rgb(38,70,83); color: blue;}
        li a.active {background-color: rgb(138,177,125); color: red;}
        .leftdiv {
            float: left;
        }
        .rightdiv {
            float: right;
            width: 100px;
        }
        div {
            padding : 1%;
            color: blue;
            background-color: white;
            width: 40%;
            border: 1px solid blue;
        }
        span {
            color : blue;
            background-color: white;
            margin: 8px;
            font-size: 25px;
        }
        .sprite {
            display:block;
            position:relative;
            width:50px;
            height:50px;
            border:1px solid red;
            overflow:hidden;
        }
        #fb { 
            position:absolute;
            top:0;
            left:0;
        } 
        #fb:hover {
            position:absolute;
            top:-50px;
            left:0;
        }
        form {   
            color : blue;
            background-color: white;
            margin: 8px;
            font-size: 25px;
        }
    </style>
</head>
<body>
    <nav>  
        <!-- 绑定submit事件，替代按钮onclick -->
        <form action="Profilepage.html" onsubmit="return passvalues()">
            <!-- 修正style属性引号错误 -->
            <fieldset style="border-style:solid; color : black; border-width:1px; padding:10px; text-align:left;">
                <legend>Register: </legend>

                <label for="name1">*First Name:</label>
                <input type="text" id="name1" name="name1"  required/><br><br>
                <label for="name2">*Last Name:</label>
                <input type="text" id="name2" name="name2"  required/><br><br>

                <p>*Your Gender:</p>
                <input type="radio" id="male" name="gender" value="Male"  required/>
                <label for="male">Male</label><br>
                <input type="radio" id="female" name="gender" value="Female"  required/>
                <label for="female">Female</label><br>
                <input type="radio" id="prefernotsay" name="gender" value="Prefer not say"  required/>
                <label for="prefernotsay">Prefer Not Say</label>
                
                <br>
                <br>

                <label for="email">*Email Address:</label>
                <input type="email" id="email" name="email"  required/><br><br>

                <label for="number">#Number:</label>
                <input type="text" id="number" name="Number"  required/><br><br>

                <label for="pword">*Your Password: </label>
                <input type="password" id="pword" name="pword" required/>
                
                <br>
                <br>

                <label for="cmmnts">*Reasons for registering: </label><br>
                <!-- 修正textarea写法，删除错误的input嵌套 -->
                <textarea id="tArea" name="cmmnts" rows="4" cols="50" required></textarea>
                
                <br>
                <br>
                <input type="submit" value="Submit"/>

            </fieldset>
        </form>
    </nav>

    <script>
        function passvalues() {
            // 校验必填项+单选框选中状态
            const firstName = document.getElementById("name1").value.trim();
            const lastName = document.getElementById("name2").value.trim();
            const email = document.getElementById("email").value.trim();
            const password = document.getElementById("pword").value.trim();
            const reason = document.getElementById("tArea").value.trim();
            const genderSelected = document.querySelector('input[name="gender"]:checked');

            // 存在未填项，重置表单阻止提交
            if (!firstName || !lastName || !email || !password || !reason || !genderSelected) {
                document.querySelector('form').reset();
                return false;
            }

            // 所有字段校验通过，存入localStorage
            localStorage.setItem("textvalues", firstName);
            localStorage.setItem("textvalue", lastName);
            localStorage.setItem("emailvalues", email);
            localStorage.setItem("passwordvalues", password);
            localStorage.setItem("textareavalue", reason);
            localStorage.setItem("gendervalue", genderSelected.value);

            // 允许表单跳转
            return true;
        }
    </script>
</body>
</html>

个人资料页（Profilepage.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Profile</title>
    <style type="text/css">
        ul {list-style-type: none; margin: 0; padding: 0; background-color: rgb(42,157,143); overflow: hidden;}
        li{float: left;} 
        li a:link{display: block; color: black; padding: 10px; text-decoration: none;}
        li a:visited{color: orange;}
        li a:hover {background-color: rgb(38,70,83); color: blue;}
        li a.active {background-color: rgb(138,177,125); color: red;}
        .leftdiv {
            float: left;
        }
        .rightdiv {
            float: right;
            width: 100px;
        }
        div {
            padding : 1%;
            color: blue;
            background-color: white;
            width: 40%;
            border: 1px solid blue;
        }
        span {
            color : blue;
            background-color: white;
            margin: 8px;
            font-size: 25px;
        }
        .sprite {
            display:block;
            position:relative;
            width:50px;
            height:50px;
            border:1px solid red;
            overflow:hidden;
        }
        #fb { 
            position:absolute;
            top:0;
            left:0;
        } 
        #fb:hover {
            position:absolute;
            top:-50px;
            left:0;
        }
    </style>
</head>
<body>
<div>
    <p>First Name: </p>
    <span id="name1"></span>
    <br>
    <br>
    <p>Last Name: </p>
    <span id="name2"></span>
    <br>
    <br>
    <p>Gender: </p>
    <span id="gender"></span>
    <br>
    <br>
    <p>Email: </p>
    <span id="email"></span>
    <br>
    <br>
    <p>Password: </p>
    <span id="pword"></span>
    <br>
    <br>
    <p>Why I support this campaign: </p>
    <span id="tArea"></span>
</div>
    <script>
        // 修正key拼写，补全缺失字段读取
        document.getElementById("name1").innerHTML = localStorage.getItem("textvalues");
        document.getElementById("name2").innerHTML = localStorage.getItem("textvalue");
        document.getElementById("email").innerHTML = localStorage.getItem("emailvalues");
        document.getElementById("pword").innerHTML = localStorage.getItem("passwordvalues");
        document.getElementById("tArea").innerHTML = localStorage.getItem("textareavalue");
        document.getElementById("gender").innerHTML = localStorage.getItem("gendervalue");
    </script>
</body>
</html>

关键实现说明

单选框取值：通过document.querySelector('input[name="gender"]:checked')获取选中的单选按钮，若返回null代表未选中，直接走校验不通过逻辑；选中后取value值存储即可。
表单拦截逻辑：将校验函数绑定到form的onsubmit事件，函数返回false时会自动阻止表单默认跳转行为，校验不通过时调用form.reset()重置所有输入项。
localStorage匹配规则：存储和读取的key完全大小写敏感，必须保持完全一致才能正确取值。

内容的提问来源于stack exchange，提问作者beginner

HTML注册表单跳转个人页 数据回显与校验问题排查修复

问题根因汇总 #

修正后代码 #

注册页（registration.html） #

个人资料页（Profilepage.html） #

关键实现说明 #

HTML注册表单跳转个人页数据回显与校验问题排查修复

问题根因汇总

修正后代码

注册页（registration.html）

个人资料页（Profilepage.html）

关键实现说明