在学校项目中这样做。我们的任务是在没有服务器的情况下制作工作登录表单。我已经完成了大多数，但是该表格还有一个要求。仅使用HTML，JavaScript和CSS。
要求是，当用户输入不正确的用户名/密码3次时，应出现一个警报并锁定页面。
请帮助？
到目前为止，这是我的代码：
function enterUsername() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
function inputPass() {
var x = document.forms["myForm"]["pword"].value;
if (x == "") {
alert("Password must be filled out");
return false;
}
}
function enterPassword() {
var password = document.getElementById("pword").value;
var username = document.getElementById("fname").value;
if (password == "hello" && username == "1234") {
window.location = "project mainframe.html";
return true;
}
else if (password !== "hello" && username !== "1234") {
alert("Either Username or Password is incorrect");
return false;
}
}
function timeAlert() {
alert("Your time limit has run out." + "n" + "Please refresh the page to try again.");
window.location = "project.html"
}body{
background: url("backgroundimg.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
div.login {
border: none;
border-left: 1px;
}
input[type=text], select {
width: 100%;
padding: 14px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=password], select {
width: 100%;
padding: 14px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 40%;
background-color: #1a1aff;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #0000e6;
}
input[type=reset] {
width: 40%;
background-color: red;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=reset]:hover {
background-color: #e60000;
}
div.inner {
background-color: #f1f3f2;
padding: 20px;
width: 470px;
}<html>
<head>
<title>Log In Form </title>
</head>
<body onload="setTimeout(timeAlert, 6000)">
<center>
<br><br><br><br><br><br><br><br>
<div class=inner>
<div class=border>
<div class=login align=left>
<font size=13 face=helvetica> Log In </font><br>
<form name="myForm">
<font face=helvetica size=6>
<input type="text" placeholder="Username" id="fname" size=30 name="fname" required/>
<input type="password" placeholder="Password" id="pword" name="pword" required/> <br>
<input type=submit onClick="enterUsername(),inputPass(),enterPassword(); return false" id="button" value="OK"/>
<input type=reset value="CANCEL"/>
</form>
</div>
</div>
</html>不是阻止用户从客户端阻止用户的好习惯，这种验证是由服务器端驱动的。
但是要回答您的问题，您可以为每个无效的登录使用计数器。(请参阅Bellow片段(
var counter = 0;
function enterUsername() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
function inputPass() {
var x = document.forms["myForm"]["pword"].value;
if (x == "") {
alert("Password must be filled out");
return false;
}
}
function enterPassword() {
var password = document.getElementById("pword").value;
var username = document.getElementById("fname").value;
if (password == "hello" && username == "1234") {
window.location = "project mainframe.html";
return true;
}
else if (password !== "hello" && username !== "1234") {
counter++;
alert("Either Username or Password is incorrect");
return false;
}
}
function timeAlert() {
alert("Your time limit has run out." + "n" + "Please refresh the page to try again.");
window.location = "project.html"
}
function checkUserIfIsBlocked(){
if (counter>2){
alert("User is blocked");
return false;
}
return true;
}
body{
background: url("backgroundimg.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
div.login {
border: none;
border-left: 1px;
}
input[type=text], select {
width: 100%;
padding: 14px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=password], select {
width: 100%;
padding: 14px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 40%;
background-color: #1a1aff;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #0000e6;
}
input[type=reset] {
width: 40%;
background-color: red;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=reset]:hover {
background-color: #e60000;
}
div.inner {
background-color: #f1f3f2;
padding: 20px;
width: 470px;
} <body onload="setTimeout(timeAlert, 6000)"> <center>
<div class=inner><div class=border>
<div class=login align=left>
<font size=13 face=helvetica> Log In</div> </font><br>
<form name="myForm">
<font face=helvetica size=6>
<input type="text" placeholder="Username" id="fname" size=30 name="fname" required>
<input type="password" placeholder="Password" id="pword" name="pword" required> <br>
<input type=submit onClick="checkUserIfIsBlocked(),enterUsername(),inputPass(),enterPassword(); return false" id="button" value="OK">
<input type=reset value="CANCEL">
</form> </div></div>好吧，因此，基本上，您可以使用for loop重复某些内容。使用循环检查，一件事使用循环，而不是foreach。因此，当var x = 3时做类似的操作，然后运行一些代码。循环通过表格。那也可以清除代码。
希望有帮助，萨米
也许这是您可以参考的内容？
模板
<div class="container">
<div class="login-container">
<form method="GET" action="#" id="login-form">
<div class="content-wrapper">
<h3>Login</h3>
</div>
<div class="element-wrapper">
<input type="text" name="username" class="field field-text" placeholder="Username" />
</div>
<div class="element-wrapper">
<input type="password" name="password" placeholder="Password" class="field field-password" />
</div>
<div class="element-wrapper button-wrapper">
<input type="submit" class="button button-submit" value="Submit" />
<input type="reset" class="button button-reset" value="Reset" />
</div>
</form>
</div>
</div>
样式表
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
.container {
background-color: #f1f3f2;
max-width: 480px;
padding: 20px;
margin: 30px auto;
border-radius: 5px;
}
.field {
width: 100%;
padding: 12px 8px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
.button {
color: #fff;
padding: 12px 26px;
cursor: pointer;
border: 0;
margin: 10px;
width: 50%;
text-shadow: 0px 1px 1px #000000;
background-clip: text;
font-weight: bold;
}
.button.button-submit {
background-color: #4b4bff;
margin-left: 0px;
border-bottom: 5px solid #1c1c65;
}
.button.button-submit:hover,
.button.button-submit:focus {
background-color: #7878f9;
border-color: #4b4bff;
color: #dcdcdc;
}
.button.button-reset {
background-color: #ff3737;
margin-right: 0px;
border-bottom: 5px solid #d40c0c;
}
.button.button-reset:hover,
.button.button-reset:focus {
background-color: #ff7777;
border-color: #ff3737;
color: #dcdcdc;
}
.button-wrapper {
display: flex;
}
body {
background: transparent;
}
*,
html,
body {
font-family: 'Open Sans', sans-serif;
}
javascript
(function() {
window.onload = function() {
setTimeout(function() {
alert("Your time limit has run out.nPlease refresh the page to try again.");
attempts = 0;
}, 6000);
};
// counter counting number of attempts
var attempts = 2;
// messages to display in case of success / errors
var messages = {
"exceededAttempts": "You have exceeded the number of attempts to Log in.nPlease try again later.",
"missingUsername": "Please check the username field and try again",
"missingPassword": "Please check the password field and try again",
"missingFields": "Please check the form and try again",
'success': "Login Success",
'fail': "Login Failed"
};
// form elements
var form = document.getElementById("login-form");
var usernameField = document.getElementsByName("username")[0];
var passwordField = document.getElementsByName("password")[0];
var submitButton = document.getElementsByClassName("button-submit")[0];
// valid credentials
var validCredentials = {
"username": "admin",
"password": "admin"
};
/**
* @function login
* authenticates the user
*/
function login() {
// check if user is within allowed attemption limit
if (attempts > 0) {
// username and password value
var username = usernameField.value;
var password = passwordField.value;
// if username or password is blank
if (username === "" || password === "") {
// if username and password ARE blank
if (username === "" && password === "") {
alert(messages.missingFields);
} else {
// if only username is blank
if (username === "") {
alert(messages.missingUsername);
} else if (password === "") {
// if only password is blank
alert(messages.missingPassword);
}
}
} else {
// the form is filled and username and password are as expected
if (username === validCredentials.username && password === validCredentials.password) {
alert(messages.success);
} else {
// the username and password are not as expected
alert(messages.fail);
}
}
// count down number of attempts
attempts--;
} else {
// notify user that he/she is out of attempts
alert(messages.exceededAttempts);
}
};
// when form is submitted
form.onsubmit = function(e) {
// stop default behaviour
e.preventDefault();
login();
}
// when submit button is clicked
submitButton.onclick = function(e) {
// stop default behaviour
e.preventDefault();
login();
}
})();
https://jsfiddle.net/fatgamer85/uwya5hy9/
For。
//This method replaces the onload function within the html. The snippet returns an error but works fine within a normal enviornment: window.addEventListener("load", setTimeout(timeAlert, 60000));
var attempts = 0;
function validate() {
var uname = document.getElementById("username-1").value;
var pword = document.getElementById("password-1").value;
var error = document.getElementById("error");
var loginF = document.getElementById("login-form");
var content = document.getElementById("content-1");
if (uname == "" || pword == "") {
error.innerHTML = "All feilds must be filled out.";
return false;
}
if (uname !== "Admin" || pword !== "Password1!") {
error.innerHTML = "Username or Password is incorrect."
attempts++;
} else if (uname == "Admin" && pword == "Password1!") {
loginF.submit();
return true;
}
if (attempts > 2) {
content.classList.remove("default");
content.classList.add("blocked");
loginF.style.display = "none";
document.getElementById("blocked").style.display = "block";
return false;
}
}
function timeAlert() {
alert("Your time limit has run out." + "n" + "Please refresh the page to try again.");
window.location = "project.html"
}body {
font-family: Arial, Helvetica, sans-serif;
}
input[type=text],
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
button:hover {
opacity: 1;
}
.cancelbtn {
padding: 14px 20px;
background-color: #f44336;
}
.cancelbtn,
.loginbtn {
float: left;
width: 50%;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
#error {
color: red;
}
#blocked {
display: none;
color: white;
text-align: center;
}
.container {
padding: 8px 16px;
}
/* background */
.login {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background: url("https://markleisherproductions.com/wp-content/uploads/2015/10/grey-website-background-illusionapparel2.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-color: lightgrey;
/* Fallback color */
}
/* Content/Box */
.login-content {
margin: 100px auto 15% auto;
border: 1px solid #888;
max-width: 600px;
width: 90%;
}
.default {
background-color: #fefefe;
}
.blocked {
background-color: #f44336;
}
@media screen and (max-width: 300px) {
.cancelbtn,
.loginbtn {
width: 100%;
}
}<meta name="viewport" content="width=device-width, initial-scale=1">
<body onload="setTimeout(timeAlert, 60000)">
<div class="login">
<div id="content-1" class="login-content default">
<div id="blocked">
<h1>Account Blocked</h1>
<p>Too many attempts. Please contact system administrator.</p>
</div>
<form id="login-form" action="project mainframe.html">
<div class="container">
<h1>Login</h1>
<p id="error"></p>
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" id="username-1" name="uname" placeholder="Enter Username" required>
<label for="psw"><b>Password</b></label>
<input type="password" id="password-1" name="psw" placeholder="Enter Password" required>
<div class="clearfix">
<button type="button" onclick="location.reload();" class="cancelbtn">Cancel</button>
<button type="button" onclick="validate();" class="loginbtn">Login</button>
</div>
</div>
</form>
</div>
</div>
</body>