Question

为学校项目执行此操作。我们的任务是在没有服务器的情况下创建一个工作登录表单。我已经完成了大部分工作，但是对表单还有一个要求。仅使用HTML，Javascript和CSS。

要求是当用户输入三次错误的用户名/密码时，应该会出现一个警告并锁定页面。

请帮帮忙？

到目前为止，这是我的代码：

＆＃13;

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"
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

从客户端阻止用户不是一个好习惯，这种验证是由服务器端驱动的。

但要回答您的问题，您可以使用计数器进行每次无效登录。（参见波纹管摘录）

   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>

Answer 2

好的，基本上，你可以使用for循环来重复某些事情。使用循环来检查，有一件事使用for循环，而不是forEach。所以做一些像var x = 3的事情，然后运行一些代码。循环通过表单。这也会清除代码。

希望有所帮助，萨米

Answer 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/

Answer 4

乐趣。

//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>

JAVASCRIPT - 如何在三次输入错误密码时创建一个有效的函数？

4 个答案: