在進行 javascript 驗證時，我的 HTML 頁面變得無響應
[英]My HTML page becomes unresponsive when doing javascript validation
問題描述
當我嘗試在密碼輸入字段中輸入值時，我的 HTML 頁面有密碼輸入字段，然后頁面在輸入超過 30 到 40 個字符后變得無響應。
我在所有 web 瀏覽器中都遇到了這個問題。 即使我將最小長度和所有其他類似的下限、上限、數字和符號值更改為 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)(.=?*[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>
2 個解決方案
解決方案1
0 已采納 2020-04-24 18:03:28
我運行代碼段並在獲得 30-40 個字符后運行良好我很確定處理所有代碼需要一段時間。 這就是為什么 in 變得無響應（取決於計算機）
解決它：
1-。 將onkeyup更改為onchange 。 這將在此人完成密碼寫入時限制您的所有正則表達式驗證
2-。 更改onkeyup以submit並在驗證后返回 true 或 false。 （我更喜歡這個。你正在錄下你的密碼並告訴你它是錯誤的，這有點煩人。“我知道，我剛開始輸入它”
這是第二個選項的代碼：
如果驗證返回 true，這只會將表單提交給 php。
注意：您應該只在 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>
解決方案2
0 2020-04-24 18:09:07
這是因為您的正則表達式非常低效。 您正在做一些奇怪的事情，我認為這使正則表達式引擎嘗試匹配所有字母的所有可能組合，這是一個 O(n^2) 問題，這意味着對於每個額外的字母，處理器都會加倍工作。
這里有更好的正則表達式：
- 包含小寫：
[az] - 包含大寫：
[AZ] - 包含數字：
\d
您可以執行的其他一些小的性能優化：
- 除非必須，否則不要修改 DOM。 您每次按鍵都會添加和刪除類，這很糟糕。 相反，使用 js 變量跟蹤某些內容是否有效，然后僅在您的 javascript state 與 DOM state 不匹配時更新 DOM。
- 不要在每次按鍵時創建新的正則表達式。 只需創建一次並重復使用它們。
在其他HTML頁面上使用Javascript全局數組時，其定義變得不確定
[英]Javascript global array becomes undefined when used on other html page
網站在代碼中的計算過程中變得無響應。 但是計算完成后開始工作？ [JavaScript]
[英]Website becomes unresponsive during calculations which are there in code. But starts working when calculation is done? [JavaScript]
JavaScript和HTML上的大量數據導致XAMPP中的“頁面無響應”對話框
[英]Large quantity of data on JavaScript and HTML leads to the “Page unresponsive” dialogue in XAMPP
運行我的腳本時，瀏覽器中的javascript控制台無響應
[英]javascript console in the browser went unresponsive when running my script
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.