如何在表单清空后保留JS函数输出的提示信息？

问题出在点击submit按钮时，浏览器会默认触发表单提交动作并刷新页面，导致刚生成的提示信息被清除。要实现表单清空但提示保留，可以通过以下两种方式修改：

方法一：阻止表单默认提交行为，手动清空表单 #

1. 修改JS验证函数 #

更新register.js中的代码，添加阻止默认行为的逻辑，并在密码匹配时手动重置表单：

function verifyid(event) {
    // 阻止浏览器默认的表单提交刷新行为
    event.preventDefault();
    
    const str1 = document.getElementById("first_pass").value;
    const str2 = document.getElementById("second_pass").value;
    let displayOutput;

    if (str1 === str2) {
        displayOutput = "You are our new user";
        // 手动清空表单内容
        document.querySelector('form').reset();
    } else {
        displayOutput = "The passwords do not match";
    }
    
    document.getElementById('output').innerHTML = displayOutput;
}

2. 修改HTML中的提交按钮 #

给onclick事件传递event参数，让函数能捕获并阻止默认行为：

<input type="submit" value="REGISTER" onclick="verifyid(event)">

方法二：将提交按钮改为普通按钮 #

1. 修改HTML按钮类型 #

把type="submit"改成type="button"，这样按钮不会触发默认的表单提交动作：

<input type="button" value="REGISTER" onclick="verifyid()">

2. 更新JS验证函数 #

在密码匹配时手动清空表单即可：

function verifyid() {
    const str1 = document.getElementById("first_pass").value;
    const str2 = document.getElementById("second_pass").value;
    let displayOutput;

    if (str1 === str2) {
        displayOutput = "You are our new user";
        // 手动清空表单内容
        document.querySelector('form').reset();
    } else {
        displayOutput = "The passwords do not match";
    }
    
    document.getElementById('output').innerHTML = displayOutput;
}

两种方法都能实现需求：密码匹配时清空表单，同时保留提示信息；不匹配时只显示错误提示，表单内容保留以便用户修改。

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