如何在登录时使用JavaScript在2个html页面之间发送用户是正确的

我一直在运行replit.com的代码，如果有任何帮助，我将不胜感激。window.location.href = "veiw.html"是不起作用的主要内容，它没有将用户带到第二个html页面，而是重新加载页面。因此，如果有任何其他方法可以将用户带到另一个页面或任何其他方法来解决问题，我愿意尝试任何方法。

//Login; verifaction//
function verifaction() {
var user = document.getElementById("uname").value;
var pass = document.getElementById("psw").value;
var setn = "Example"
var setp = "13"
var y = document.getElementById('show');
if(user === setn) {
if(pass === setp) {
window.location.href = "veiw.html"
}
else{alert("Incorrect Password")}}
else{alert("Incorrect Username")}
};

#login {
display: block;
padding-left: auto;
padding-right: auto;
padding-top: auto;
padding-bottom: auto;
font-family: 'Economica';
font-size: 20px;
text-align: center;
}

<html>
<body>
<script src="script.js"></script>
<br><br><br><br><br>
<div clss="login">
<form>
<label for="uname"><b>Username:</b></label>
<input type="text" placeholder="Enter Username" name="uname" id="uname" required>
<br><br>
<label for="psw"><b>Password:</b></label>
<input type="password" placeholder="Enter Password" name="psw" id="psw" required>
<br><br>
<button type="submit" id="log" onclick="verifaction()">Login</button>
<label id="re">
<br><br>
<input type="checkbox" name="remember">Remember me
</label>
</form>
</div>
</body>
</html>

您的主要问题是表单提交并且页面刷新，因为您没有使用Event.prprefentDefault((。因此：

使用Event.prventDefault((来阻止默认的浏览器表单操作
停止在HTML元素上使用内联on*属性。JS应该只在一个地方，那是它各自的标签或文件
不要以渲染阻塞的方式在HTML周围放置<script>标记。脚本(不带defer属性(应该在关闭</body>标记之前
在表单Element中使用ID，并侦听"submit"事件
什么是"em"；"验证"？将函数命名为：login(evt)，并使用Event作为参数
修复您的拼写错误：确保使用正确的文件名~~veiw.html~~我认为是：view.html
(附言：NEVER在文件中用纯文本硬编码UN/PW(

示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
</head>
<body>
<div clss="login">
<form id="form-login">
<label for="uname"><b>Username:</b></label>
<input type="text" placeholder="Enter Username" name="uname" id="uname" required>
<br><br>
<label for="psw"><b>Password:</b></label>
<input type="password" placeholder="Enter Password" name="psw" id="psw" required>
<br><br>
<button type="submit">Login</button>
<label><input type="checkbox" name="remember">Remember me</label>
</form>
</div>

<!-- <script> or <script src="script.js"> -->
<script>
// DOM helpers:
const EL = (sel, par) => (par || document).querySelector(sel);
// Hardcoded password and username
// so that anyone can hack the app:
const setn = "Example";
const setp = "13";
// Task:
// Login form handler
const EL_form = EL("#form-login");
const EL_uname = EL("#uname");
const EL_passw = EL("#psw");
const login = (evt) => {
evt.preventDefault(); // Prevent default browser action submit
const user = EL_uname.value;
const pass = EL_passw.value;
const errors = [];
if (user !== setn) errors.push("Incorrect Username");
if (pass !== setp) errors.push("Incorrect Password");
if (errors.length) return alert(errors.join("n"));
// If the function didn't return (exited) till now, we're fine!
// Navigate to page:
window.location.href = "view.html"
};
EL_form.addEventListener("submit", login);
</script>
</body>
</html>

submit使按钮"提交"；表单，并且由于您没有在<form>标记中指定任何URL，它将向同一URL发送带有表单数据的GET请求。

你想做的是禁用浏览器的默认行为，并执行你的"；onClick"功能：

所以在HTML上通过event

<button type="submit" id="log" onclick="verifaction(event)">Login</button>

然后，你禁用它：

function verifaction(event) {
event.preventDefault()
...
}

或者，您也可以收听点击保存按钮时表单将收到的save事件：

<form onsubmit="verifaction(event)">
<button type="submit" id="log">Login</button>
</form>

完整示例：

//Login; verifaction//
function verifaction(event) {
event.preventDefault()
var user = document.getElementById("uname").value;
var pass = document.getElementById("psw").value;
var setn = "Example"
var setp = "13"
var y = document.getElementById('show');
if (user === setn) {
if (pass === setp) {
window.location.href = "veiw.html"
} else {
alert("Incorrect Password")
}
} else {
alert("Incorrect Username")
}
};

#login {
display: block;
padding-left: auto;
padding-right: auto;
padding-top: auto;
padding-bottom: auto;
font-family: 'Economica';
font-size: 20px;
text-align: center;
}

<html>
<body>
<script src="script.js"></script>
<br><br><br><br><br>
<div clss="login">
<form>
<label for="uname"><b>Username:</b></label>
<input type="text" placeholder="Enter Username" name="uname" id="uname" required>
<br><br>
<label for="psw"><b>Password:</b></label>
<input type="password" placeholder="Enter Password" name="psw" id="psw" required>
<br><br>
<button type="submit" id="log" onclick="verifaction(event)">Login</button>
<label id="re">
<br><br>
<input type="checkbox" name="remember">Remember me
</label>
</form>
</div>
</body>
</html>

阅读更多：

event.prventDefault((：https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
form.onsubmit((：https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onsubmit

我相信你这样做是一种学习练习；在实际项目中，您应该避免验证发送给用户的客户端(HTML+JS(上的数据。

页面正在重新加载，因为您正在提交表单，并且由于它没有设置action属性，因此默认为当前页面。一旦表单提交，页面就会刷新，而JS不会运行。

您想要做的是将事件监听器添加到submit事件的表单中，防止默认的浏览器行为，然后在JS中执行逻辑。

像这样：

// wait for DOMContentLoaded so you can find the form in DOM
window.addEventListener("DOMContentLoaded", (event) => {
document.querySelector("form").addEventListener("submit", (e) => {
e.preventDefault(); // prevent default browser behaviour (submitting the form)
verifaction(); // run whatever your logic is in this function
});
});

此外，最好从按钮中删除click监听器，在<form>上设置一个submit监听器是一种更好的做法，因为无论表单是如何提交的，它都会触发，而不仅仅是通过单击。

相关内容

最新更新

热门标签：