表单验证后无法将数据传递至另一HTML页面的技术求助

我帮你排查了下代码里的问题，主要是两个关键点导致数据没传到目标页面：

问题根源 #

• 表单绑定了重复的onsubmit事件：你的<form>标签同时写了onsubmit="return validations(this);"和onsubmit="return parse();"，HTML元素的相同事件属性会被后面的覆盖，所以实际只有其中一个函数会被触发，验证和存储逻辑没有按预期连贯执行。
• validations函数缺少验证通过后的返回值：当字段验证通过时，函数没有返回true，这会导致表单默认的提交行为被阻止，即使验证没问题，页面也不会跳转到UserInfo.html，同时localStorage也没机会设置值。

修复方案 #

我们可以把验证和存储逻辑合并到一个提交处理函数里，确保流程连贯：

修改第一个HTML页面的代码 #

<!DOCTYPE HTML > 
<html> 
<head> 
<title> User Registration Page</title> 
<link href="UserRegistration.css" rel="stylesheet" type="text/css"> 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 
<script>
function handleSubmit(form) {
    // 先执行验证逻辑
    function trimfield(str) { 
        return str.replace(/^\s+|\s+$/g, ''); 
    } 
    var errors = []; 
    var n = document.getElementById("nam").value; 
    if (trimfield(n) === "") { // 加上trim处理，避免空格被当成有效输入
        errors.push("Enter Name \n"); 
    } 

    if (errors.length > 0) { 
        var msg = "Errors : \n\n"; 
        for (var i = 0; i < errors.length; i++) { 
            msg = msg + errors[i]; 
        } 
        alert(msg); 
        return false; // 验证失败，阻止表单提交
    }

    // 验证通过，存储数据到localStorage
    localStorage.setItem("textvalue", trimfield(n));
    return true; // 允许表单提交跳转
}
</script>
</head> 
<body> 
<!-- 只保留一个onsubmit事件，绑定合并后的处理函数 -->
<form action="UserInfo.html" method="POST" onsubmit="return handleSubmit(this);"> 
<div class="name"> Name : <input type="text" id="nam" name="fullName"> </div> 
<button type="submit" class="btn btn-primary btn-lg">Save</button> 
</form> 
</body> 
</html>

优化第二个HTML页面（可选） #

可以加个判断，避免没有获取到值时显示空白：

<html> 
<body> 
Welcome : <span id="result"></span>
<script> 
var userName = localStorage.getItem("textvalue");
document.getElementById("result").innerHTML = userName ? userName : "未获取到姓名";
// 可选：获取后清空localStorage，避免刷新页面还显示旧值
// localStorage.removeItem("textvalue");
</script> 
</body> 
</html>

修复说明 #

1. 合并了验证和存储逻辑到handleSubmit函数，确保验证通过后才会存储数据并允许表单跳转。
2. 给姓名验证加上了trimfield处理，避免用户只输入空格被当成有效输入。
3. 移除了重复的onsubmit事件，避免事件覆盖问题。

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