[英]Password validation for special characters in javascript
我正在編寫一個密碼驗證代碼,其中至少包含:一個小字母、一個大寫字母、一個數字、一個特殊字符,最少 8 個,最多 12 個字符
但無法驗證特殊字符,其余所有條件均有效
HTML 代碼:
<label for="psw"><b>Password <i class="fa fa-asterisk" style="font-size: 12px; color: red"></i>:</b></label>
<input id="pswd" name="pswd" type="password" placeholder="Enter Password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-])$" title="Must contain at least one Special Character and one Number and one Uppercase and Lowercase letter, and at least 8 or more characters" required> <br>
<div id="message">
<h3>Password must contain the following:</h3>
<p id="letter" class="invalid">A <b>lowercase</b> letter</p>
<p id="capital" class="invalid">A <b>capital (uppercase)</b>letter</p>
<p id="number" class="invalid">A <b>number</b></p>
<p id="length" class="invalid">Minimum <b>8 characters</b></p>
<p id="spcl" class="invalid">A <b>Special character</b></p>
<p id="maxlength" class="invalid">Minimum <b>8 character</b> and Maximum <b>12 character</b></p>
</div>
Javascript
<script type="text/javascript">
var myInput = document.getElementById("pswd");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var maxlength = document.getElementById("maxlength");
var spcl = document.getElementById("spcl");
// 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 = /[a-z]/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 = /[A-Z]/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 = /[0-9]/g;
console.log(numbers);
if (myInput.value.match(numbers)) {
number.classList.remove("invalid");
number.classList.add("valid");
} else {
number.classList.remove("valid");
number.classList.add("invalid");
}
var spcl = /[!@#$%^&*_=+-]/g;
console.log(spcl);
if (myInput.value.match(spcl)) {
spcl.classList.remove("invalid");
spcl.classList.add("valid");
} else {
console.log(myInput.value);
spcl.classList.remove("valid");
spcl.classList.add("invalid");
}
//Validate max length
if (myInput.value.length >= 8 && myInput.value.length <= 12) {
console.log('in min max condition');
console.log(myInput.value.length);
maxlength.classList.remove("invalid");
maxlength.classList.add("valid");
} else {
maxlength.classList.add("invalid");
maxlength.classList.remove("valid");
}
}
</script>
當我檢查特殊字符時
var spcl = /[!@#$%^&*_=+-]/g;
console.log(spcl);
if (myInput.value.match(spcl)) {
spcl.classList.remove("invalid");
spcl.classList.add("valid");
} else {
console.log(myInput.value);
spcl.classList.remove("valid");
spcl.classList.add("invalid");
}
在控制台中顯示錯誤為:未捕獲的類型錯誤:無法讀取未定義的屬性(讀取“刪除”)
在打印變量“spcl”的類列表時,我得到的輸出是“無效”,但仍然面臨這個未捕獲的類型錯誤:無法讀取未定義的屬性(讀取“刪除”)
檢查這個問題: 檢查字符串中的特殊字符
對於特殊字符使用這個:
var format = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]+/;
if(format.test(string)){
return true;
} else {
return false;
}
有了這個,你可以檢查字符串是否包含特殊字符。
//Regex for Valid Characters i.e. Alphabets, Numbers and Space.
var regex = /^[A-Za-z0-9 ]+$/
//Validate TextBox value against the Regex.
var isValid = regex.test(document.getElementById("txtName").value);
if (!isValid) {
alert("Contains Special Characters.");
} else {
alert("Does not contain Special Characters.");
}
正如我評論的那樣,您將兩個變量命名為 spcl。 當您重命名它時,它可以工作,您的正則表達式沒有任何問題。 另外,我注意到您跳過了最小長度驗證,所以我添加了它。
var myInput = document.getElementById("pswd"); var letter = document.getElementById("letter"); var capital = document.getElementById("capital"); var number = document.getElementById("number"); var maxlength = document.getElementById("maxlength"); var spcl = document.getElementById("spcl"); 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 = /[az]/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 = /[AZ]/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 = /[0-9]/g; console.log(numbers); if (myInput.value.match(numbers)) { number.classList.remove("invalid"); number.classList.add("valid"); } else { number.classList.remove("valid"); number.classList.add("invalid"); } var special = /[!@#$%^&*_=+-]/g; console.log(special); if (myInput.value.match(special)) { spcl.classList.remove("invalid"); spcl.classList.add("valid"); } else { console.log(myInput.value); spcl.classList.remove("valid"); spcl.classList.add("invalid"); } //Validate max length if (myInput.value.length >= 8 && myInput.value.length <= 12) { console.log('in min max condition'); console.log(myInput.value.length); maxlength.classList.remove("invalid"); maxlength.classList.add("valid"); } else { maxlength.classList.add("invalid"); maxlength.classList.remove("valid"); } //Validate min length if (myInput.value.length >= 8) { length.classList.remove("invalid"); length.classList.add("valid"); } else { length.classList.add("invalid"); length.classList.remove("valid"); } }
.invalid { color: red } .valid { color: green }
<label for="psw"><b>Password <i class="fa fa-asterisk" style="font-size: 12px; color: red"></i>:</b> </label> <input id="pswd" name="pswd" type="password" placeholder="Enter Password" pattern="^(?=.*[az])(?=.*[AZ])(?=.*[0-9])(?=.*[!@#$%^&*_=+-])$" title="Must contain at least one Special Character and one Number and one Uppercase and Lowercase letter, and at least 8 or more characters" required><br> <div id="message"> <h3>Password must contain the following:</h3> <p id="letter" class="invalid">A <b>lowercase</b> letter</p> <p id="capital" class="invalid">A <b>capital (uppercase)</b>letter</p> <p id="number" class="invalid">A <b>number</b></p> <p id="length" class="invalid">Minimum <b>8 characters</b></p> <p id="spcl" class="invalid">A <b>Special character</b></p> <p id="maxlength" class="invalid">Minimum <b>8 character</b> and Maximum <b>12 character</b> </p> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.