在进行 javascript 验证时，我的 HTML 页面变得无响应

Question

My HTML page is having password input field when I try to input values to the password input field then the page becomes unresponsive after entering more than 30 to 40 characters.当我尝试在密码输入字段中输入值时，我的 HTML 页面有密码输入字段，然后页面在输入超过 30 到 40 个字符后变得无响应。

I am having this issue in all web browsers.我在所有 web 浏览器中都遇到了这个问题。 Even if I change the minimum length and all other like lower, upper, number and symbol value to 50 then also the same problem persist.即使我将最小长度和所有其他类似的下限、上限、数字和符号值更改为 50，同样的问题仍然存在。 I am new to javascript.我是 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)(.=?*[az])(.=.*[AZ]),{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('(:.[az],*){' + 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('(:.[AZ],*){' + 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>

Answer 1

I run the snippet and run fine after getting 30-40 characters I'm pretty sure it takes a while to process all your code.我运行代码段并在获得 30-40 个字符后运行良好我很确定处理所有代码需要一段时间。 That's why in becomes unresponsive (depend on the computer)这就是为什么 in 变得无响应（取决于计算机）

to solve it:解决它：

1-. 1-。 Change onkeyup to onchange .将onkeyup更改为onchange 。 This will limit all your regrex validation just when the person finish writing the password这将在此人完成密码写入时限制您的所有正则表达式验证

2-. 2-。 Change onkeyup to submit and return true or false if its validated.更改onkeyup以submit并在验证后返回 true 或 false。 (I prefer this one. It's kind of annoying that you are taping your password and tells you that it's wrong. "I know, I just start to type it" （我更喜欢这个。你正在录下你的密码并告诉你它是错误的，这有点烦人。“我知道，我刚开始输入它”

here is the code for the second option:这是第二个选项的代码：

This will only submit the form to the php if the validation return true.如果验证返回 true，这只会将表单提交给 php。

Note: you should change the regex in just 1 line for better performance注意：您应该只在 1 行中更改正则表达式以获得更好的性能

 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('(?:[az].*){' + 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('(?:[AZ].*){' + 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)(.=?*[az])(.=.*[AZ]),{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>

Answer 2

It's because your regexes are horribly inefficient.这是因为您的正则表达式非常低效。 You're doing some weird stuff that I think is making the regex engine try to match all possible combinations of all letters, which is an O(n^2) problem, which means for every additional letter, the processor does double the work.您正在做一些奇怪的事情，我认为这使正则表达式引擎尝试匹配所有字母的所有可能组合，这是一个 O(n^2) 问题，这意味着对于每个额外的字母，处理器都会加倍工作。

Here are better regexes:这里有更好的正则表达式：

Contains lowercase: [az]包含小写： [az]
Contains uppercase: [AZ]包含大写： [AZ]
Contains digit: \d包含数字： \d

Some other minor performance optimizations you can do:您可以执行的其他一些小的性能优化：

Don't modify the DOM unless you have to.除非必须，否则不要修改 DOM。 You're adding and removing classes every keypress, which is bad.您每次按键都会添加和删除类，这很糟糕。 Instead, keep track of whether something is valid using js variables, then only update the DOM if your javascript state doesn't match the DOM state.相反，使用 js 变量跟踪某些内容是否有效，然后仅在您的 javascript state 与 DOM state 不匹配时更新 DOM。
Don't create new regexes on every keypress.不要在每次按键时创建新的正则表达式。 Just create them once and reuse them.只需创建一次并重复使用它们。

在进行 javascript 验证时，我的 HTML 页面变得无响应

问题描述

2 个解决方案

解决方案1
0 已采纳 2020-04-24 18:03:28

解决方案2
0 2020-04-24 18:09:07

在进行 javascript 验证时，我的 HTML 页面变得无响应

问题描述

2 个解决方案

解决方案1 0 已采纳 2020-04-24 18:03:28

解决方案2 0 2020-04-24 18:09:07

解决方案1
0 已采纳 2020-04-24 18:03:28

解决方案2
0 2020-04-24 18:09:07