我有一个包含以下代码的HTML文件：
<center>
<h1>Authorised Users Only</h1>
<form name="htmlform" method="post">
<label>Username: </label><input id ="field1" type="text"
name="first_name" maxlength="50" size="30"><br />
<label>Password: </label><input id="field2" type="text" name="password"
maxlength="50" size="30"><br />
<input type="submit" value="Submit" onclick="saveInput()">
</form>
</center>
<p id="error">Please Login</p>
用户将数据输入文本字段，然后点击提交。这称为一系列功能。首先，变量：
var loginInput1 = "";
var loginInput2 = "";
var user1 = "Dylan Vette";
var password1 = "password1";
var user2 = "guest";
var password2 = "guest";
接下来我们有了这些功能。按下html按钮时会调用第一个函数saveInput（）。这将保存输入，然后验证它：
function saveInput() {
loginInput1 = document.getElementById("field1").value;
loginInput2 = document.getElementById("field2").value;
verifyUsername1();
}
function verifyUsername1() {
if (loginInput1 == user1) {
verifyPassword1();
}
else {
verifyUsername2();
}
}
function verifyPassword1() {
if (loginInput2 == password1) {
alert("Logged In!!");
}
else {
invalidInput();
}
}
function verifyUsername2() {
if (loginInput1 == user2) {
verifyPassword2();
}
else {
invalidInput();
}
}
function verifyPassword2() {
if (loginInput2 == password2) {
alert("logged in!");
}
else {
invalidInput();
}
}
最后，我们有invalidInput（）函数，该函数应该在ID为＆＃34;错误＆＃34;的段落中显示错误文本。如果用户的输入与任何指定的变量都不匹配。
function invalidInput() {
document.getElementById("error").innerHTML += "Invaild username or
password";
}
我的问题是错误文本（Invaild用户名或 密码）显示小于SPLIT秒，然后恢复到原始状态（请登录）。是否有一个原因？怎么了？
答案 0 :(得分：0)
<form>旨在向服务器提交数据。单击按钮时，JavaScript正在运行，输出结果;然后<form>标记尝试将数据发布到服务器 - 这将导致您的页面重新加载。
一个简单的解决方案是从提交按钮中删除onclick事件处理程序;而是抓住onsubmit上的<form>事件，如下所示：
<form name="htmlform" method="post" onsubmit="saveInput();event.stopPropagation()">
这将解决问题，但是......
<form>这样做是有原因的！这是一种形式。表单用于要发送到服务器的数据。您并不打算使用客户端JS处理此数据。它意味着被发送到服务器，以便安全地处理。在表单上填写action，然后使用PHP，Node等操作来执行此服务器端任务。
答案 1 :(得分：0)
我认为这是你想要做的？
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function verifyUser() {
let password1 = document.getElementById('field1').value;
let password2 = document.getElementById('field2').value;
if(password1 !== password2) {
alert('Passwords do not match');
} else {
alert('Success');
}
}
</script>
</head>
<body>
<h1>Authorised Users Only</h1>
<form name="htmlform" method="post">
<label for="field1">Please enter password </label>
<input id="field1" type="text" name="password1" maxlength="50" size="30">
<br/>
<label for="field2">Please renter password</label>
<input id="field2" type="text" name="password2" maxlength="50" size="30">
<br/>
<input type="submit" value="Submit" onclick="verifyUser()">
</form>
<p id="message">Please Login</p>
</body>
</html>