我的HTML页面在进行javascript验证时变成了无响应。

问题描述 投票：0回答：1

我的HTML页面有密码输入栏，当我尝试在密码输入栏中输入数值时，当输入超过30到40个字符后，页面就会变得无响应。

我在所有的浏览器上都有这个问题。即使我把最小长度和其他所有的小数、大数、数字和符号值改为50，那么同样的问题仍然存在。我是一个新的JavaScript。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Style all input fields */
input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
}

/* Style the submit button */
input[type=submit] {
  background-color: #4CAF50;
  color: white;
}

/* Style the container for inputs */
.container {
  background-color: #f1f1f1;
  padding: 20px;
}

/* The message box is shown when the user clicks on the password field */
#message {
  display:none;
  background: #f1f1f1;
  color: #000;
  position: relative;
  padding: 20px;
  margin-top: 10px;
}

#message p {
  padding: 10px 35px;
  font-size: 18px;
}

/* Add a green text color and a checkmark when the requirements are right */
.valid {
  color: green;
}

.valid:before {
  position: relative;
  left: -35px;
  content: "✔";
}

/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
  color: red;
}

.invalid:before {
  position: relative;
  left: -35px;
  content: "✖";
}
</style>
</head>
<body>

<p>Try to submit the form.</p>

<div class="container">
  <form action="/action_page.php">
    <label for="usrname">Username</label>
    <input type="text" id="usrname" name="usrname" required>

    <label for="psw">Password</label>
    <input type="password" id="psw" name="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required>
    
    <input type="submit" value="Submit">
  </form>
</div>

<div id="message">
  <h3>Password must contain the following:</h3>
  <p id="letter" class="invalid">199 <b>lowercase</b> letter</p>
  <p id="capital" class="invalid">199 <b>capital (uppercase)</b> letter</p>
  <p id="number" class="invalid">199 <b>number</b></p>
  <p id="length" class="invalid">Minimum <b>199 characters</b></p>
</div>
				
<script>
var myInput = document.getElementById("psw");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var length = document.getElementById("length");

// When the user clicks on the password field, show the message box
myInput.onfocus = function() {
  document.getElementById("message").style.display = "block";
}

// When the user clicks outside of the password field, hide the message box
myInput.onblur = function() {
  document.getElementById("message").style.display = "none";
}

// When the user starts to type something inside the password field
myInput.onkeyup = function() {
  // Validate lowercase letters
  var lowerCaseLetters = new RegExp('(?:[a-z].*){' + 199 + '}', 'g')
  if(myInput.value.match(lowerCaseLetters)) {  
    letter.classList.remove("invalid");
    letter.classList.add("valid");
  } else {
    letter.classList.remove("valid");
    letter.classList.add("invalid");
  }
  
  // Validate capital letters
  var upperCaseLetters = new RegExp('(?:[A-Z].*){' + 199 + '}', 'g')
  if(myInput.value.match(upperCaseLetters)) {  
    capital.classList.remove("invalid");
    capital.classList.add("valid");
  } else {
    capital.classList.remove("valid");
    capital.classList.add("invalid");
  }

  // Validate numbers
  var numbers = new RegExp('(?:[0-9].*){' + 199 + '}', 'g')
  if(myInput.value.match(numbers)) {  
    number.classList.remove("invalid");
    number.classList.add("valid");
  } else {
    number.classList.remove("valid");
    number.classList.add("invalid");
  }
  
  // Validate length
  if(myInput.value.length >= 199) {
    length.classList.remove("invalid");
    length.classList.add("valid");
  } else {
    length.classList.remove("valid");
    length.classList.add("invalid");
  }
}
</script>

</body>
</html>
javascript html
1个回答
0
投票

我运行的片段和运行正常后，得到30-40个字符，我敢肯定，它需要一段时间来处理你的所有代码。这就是为什么在变得无响应（取决于计算机）。

来解决它。

1-. 改变 onkeyup 到 onchange. 这将限制你所有的regrex验证，只是当一个人写完密码的时候

2-. 变化 onkeyup 到 submit 并返回true或false是否被验证。(我比较喜欢这个。你在录入密码的时候，告诉你密码错了，这有点烦人。"我知道，我就开始打了"

这里是第二个选项的代码。

这将只提交表单到php，如果验证返回true。

注意：为了更好的性能，你应该只修改1行的regex。

var myInput = document.getElementById("psw");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var length = document.getElementById("length");

// When the user clicks on the password field, show the message box
myInput.onfocus = function() {
  document.getElementById("message").style.display = "block";
}

// When the user clicks outside of the password field, hide the message box
myInput.onblur = function() {
  document.getElementById("message").style.display = "none";
}

// When the user starts to type something inside the password field
function validate() {
  // Validate lowercase letters
  var lowerCaseLetters = new RegExp('(?:[a-z].*){' + 199 + '}', 'g')
  if(myInput.value.match(lowerCaseLetters)) {  
    letter.classList.remove("invalid");
    letter.classList.add("valid");
  } else {
    letter.classList.remove("valid");
    letter.classList.add("invalid");
  }
  
  // Validate capital letters
  var upperCaseLetters = new RegExp('(?:[A-Z].*){' + 199 + '}', 'g')
  if(myInput.value.match(upperCaseLetters)) {  
    capital.classList.remove("invalid");
    capital.classList.add("valid");
  } else {
    capital.classList.remove("valid");
    capital.classList.add("invalid");
    return false;
  }

  // Validate numbers
  var numbers = new RegExp('(?:[0-9].*){' + 199 + '}', 'g')
  if(myInput.value.match(numbers)) {  
    number.classList.remove("invalid");
    number.classList.add("valid");
  } else {
    number.classList.remove("valid");
    number.classList.add("invalid");
    return false;
  }
  
  // Validate length
  if(myInput.value.length >= 199) {
    length.classList.remove("invalid");
    length.classList.add("valid");
  } else {
    length.classList.remove("valid");
    length.classList.add("invalid");
    return false;
  }
  
  return true;
}
/* Style all input fields */
input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
}

/* Style the submit button */
input[type=submit] {
  background-color: #4CAF50;
  color: white;
}

/* Style the container for inputs */
.container {
  background-color: #f1f1f1;
  padding: 20px;
}

/* The message box is shown when the user clicks on the password field */
#message {
  display:none;
  background: #f1f1f1;
  color: #000;
  position: relative;
  padding: 20px;
  margin-top: 10px;
}

#message p {
  padding: 10px 35px;
  font-size: 18px;
}

/* Add a green text color and a checkmark when the requirements are right */
.valid {
  color: green;
}

.valid:before {
  position: relative;
  left: -35px;
  content: "✔";
}

/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
  color: red;
}

.invalid:before {
  position: relative;
  left: -35px;
  content: "✖";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<p>Try to submit the form.</p>

<div class="container">
  <form action="/action_page.php" onsubmit="return validate()">
    <label for="usrname">Username</label>
    <input type="text" id="usrname" name="usrname" required>

    <label for="psw">Password</label>
    <input type="password" id="psw" name="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required>
    
    <input type="submit" value="Submit">
  </form>
</div>

<div id="message">
  <h3>Password must contain the following:</h3>
  <p id="letter" class="invalid">199 <b>lowercase</b> letter</p>
  <p id="capital" class="invalid">199 <b>capital (uppercase)</b> letter</p>
  <p id="number" class="invalid">199 <b>number</b></p>
  <p id="length" class="invalid">Minimum <b>199 characters</b></p>
</div>
				
</body>
</html>
0
投票

这是因为你的regexes的效率太低了，你做了一些奇怪的事情，我认为是让regex引擎试图匹配所有可能的字母组合，这是个O(n^2)的问题，这意味着每多一个字母，处理器就要做双倍的工作。你做了一些奇怪的事情，我认为是让regex引擎试图匹配所有字母的所有可能组合，这是一个O(n^2)问题，这意味着每多一个字母，处理器就会做双倍的工作。

以下是更好的重构词法。

  • 包含小写字母: [a-z]
  • 包含大写字母: [A-Z]
  • 包含数字: \d

其他一些小的性能优化你可以做的。

  • 不要修改DOM，除非你有必要。每按一次键，你都要添加和删除类，这很不好。相反，使用js变量跟踪某些东西是否有效，然后只有当你的javascript状态与DOM状态不匹配时才更新DOM。
  • 不要在每次按键时都创建新的regexes。只需创建一次并重复使用它们。
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.