我正在學習 JS 的 RegExp，我正在嘗試創建一個腳本，該腳本會說密碼要么很弱，要么會讓它通過這是代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form id="myForm">
<input type="password" id="pw" />
<input type="button" id="myBtn" value="click me!" />
</form>
<div id="info"></div>
<script src="script.js" async></script>
</body>
</html>
* {
padding: 0;
margin: 0;
}
body {
background-color: #252525;
color: wheat;
}
input#pw {
width: 200px;
height: 35px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
input#myBtn {
width: 75px;
height: 35px;
position: absolute;
top: 50%;
left: 54%;
transform: translateY(-50%);
}
#info {
position: absolute;
top: 55%;
left: 47%;
transform: translateY(-50%);
text-transform: uppercase;
font-size: 32px;
animation: pulse 3s ease-in-out;
}
@keyframes pulse {
0% {
transform: scale(0.5);
}
25% {
transform: scale(1);
color: red;
}
75% {
transform: scale(0.5);
}
100% {
transform: scale(0.75);
}
}
window.onload = function(){
var info = document.getElementById("info");
var btn = document.getElementById("myForm").myBtn;
btn.onclick = function(e) {
e.preventDefault();
var pw = document.getElementById("myForm").pw.value;
var regExpPattern = /(?=.*[0-9]) (?=.*[a-z]) (?=.*[A-Z]).{5,}/;
if (regExpPattern.test(pw))
document.getElementById("myForm").submit();
else
info.innerHTML="password weak";
};
};
如您所見，我正在嘗試使用 RegExp 來查看密碼是否包含大寫字母、小寫字母和數字。它還應該確保您的密碼至少有 5 個符號長。
每當您嘗試它并且您的密碼不正確時，它確實會說“密碼弱”，但是當您嘗試在大寫和小寫字母上鍵入 5 個字母、一個數字時，它什么也做不了。
請幫忙，我不知道該怎么做：D 有人可以向我解釋一下嗎<3
uj5u.com熱心網友回復：
這是我的建議：將您的驗證標準分開，然后單獨檢查每一個。您可以將模式和相應的問題文本放入每個驗證的物件中，以便在驗證失敗時更容易地告訴用戶問題是什么。
let validations = [
{ pattern: /[a-z]/, issue: 'Must include lowercase letters.' },
{ pattern: /[A-Z]/, issue: 'Must include uppercase letters.' },
{ pattern: /[0-9]/, issue: 'Must include numbers.' },
{ pattern: /.{5,}/, issue: 'Must be at least 5 characters long.' }
];
let pwd = document.getElementById("myForm").pw.value;
let validationIssues = validations.filter(validation => {
return !pwd?.match?.(validation.pattern);
}).map(validation => validation.issue);
if (validationIssues.length > 0) {
console.log(`Your password was too weak for the following reasons: ${validationIssues.join('\n')}`);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/532020.html
上一篇：如何在html中將塊排成一行