用于验证和在同一页面中打开链接的表单
[英]form for validation and open link in same page
问题描述
在这里我使用 HTML 和 javascript 请仔细阅读它不想更改我的整个代码而只是看看。 有一个 HTML 文件和一个 javascript 文件。 两者都有联系。 在表单中，我正在获取用户名和密码并检查或验证它们是否正确，我会让用户转到下一页或在那里停止。
<!DOCTYPE html>
<html>
<head>
<title>LOGIN</title>
<style type="text/css">
#error{
color:red;
font-style: italic;
}
#success{
color:green;
font-style:italic;
}
</style>
</head>
<body>
<form method="post" onsubmit = "return(validateForm());">
Enter username : <input id='username' type='text' required>
Enter password : <input id='password' type='password' required>
<p id="error"></p>
<p id="sucess"></p>
<input type = "submit" value = "Login" />
</form>
</body>
<script type='text/javascript' src="functions.js"></script>
</html>
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
function validateForm(){
if (username == 'username' && password == 'password'){
document.getElementById('sucess').innerHTML = 'sucessful login';
return true;
}
else{
document.getElementById('error').innerHTML = 'invalid credentials';
return false;
}
}
function welcomeuser(){
document.getElementById('welcomemsg').innerHTML('Welcome ' +username);
}
2 个解决方案
解决方案1
0 2020-01-12 14:35:08
请尝试以下解决方案
functions.js 代码如下
function validateForm(){
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
if (username == 'username' && password == 'password'){
document.getElementById('sucess').innerHTML = 'sucessful login';
// redirect code in page
// window.location.href = 'thankyou.html'
return false;
} else {
document.getElementById('error').innerHTML = 'invalid credentials';
return false;
}
}
您的 HTML 代码如下
<!DOCTYPE html>
<html>
<head>
<title>LOGIN</title>
<style type="text/css">
#error{
color:red;
font-style: italic;
}
#success{
color:green;
font-style:italic;
}
</style>
<script type='text/javascript' src="functions.js"></script>
</head>
<body>
<form method="post" onsubmit="return validateForm();">
Enter username : <input id='username' type='text'>
Enter password : <input id='password' type='password'>
<p id="error"></p>
<p id="sucess"></p>
<input type = "submit" value = "Login" />
</form>
</body>
</html>
解决方案2
0 2020-01-12 14:47:02
由于您正在提交表单（使用type=submit ），因此您的表单会跳过 javascript 验证。 快速解决方法是更改：
<input type = "submit" value = "Login" />
到：
<input type = "button" value = "Login" />
而你不需要这个： onsubmit = "return(validateForm());" 只需调用函数 onclick 或使用事件侦听器
当然，您需要从函数中获取值以进行检查，然后在检查输入是否正确之后：
if (username == 'username' && password == 'password'){
做任何你想做的事（或者使用submit()方法重定向用户实际提交表单）。
我稍微修改了您的代码，这应该可以工作：
document.querySelector('#submit').addEventListener('click', validateForm); function validateForm(){ var username = document.querySelector('#username').value; var password = document.querySelector('#password').value; if (username === 'username' && password === 'password') { document.querySelector('#sucess').textContent = 'sucessful login'; // redirect or submit } else { document.querySelector('#error').textContent = 'invalid credentials'; } }
#error{color:red; font-style: italic; } #success{ color:green; font-style:italic; }
<form method="post"> Enter username : <input id='username' type='text' required> Enter password : <input id='password' type='password' required> <p id="error"></p> <p id="sucess"></p> <button id="submit" type="button">Login</button> </form>
使用带有表单的目标属性在同一页面中打开链接
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.