Parola doğrulama nasıl oluşturulur:
- Önceki sayfa Geri tuşuna basarak düğmeyi tetikleme
- Geri sayfa Sonraki sayfa
CSS ve JavaScript kullanarak parola doğrulama formu oluşturma nasıl öğrenilir.
Parola doğrulama formu oluşturma
Adım 1 - HTML Ekle:
<div class="container">
<form action="/action_page.php">
<label for="usrname">Username</label>
<input type="text" id="usrname" name="usrname" required>
<label for="psw">Şifre</label>
<input type="password" id="psw" name="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="En az bir rakam ve büyük/küçük harf içermelidir, en az 8 veya daha fazla karakter olmalıdır" required>
<input type="submit" value="Gönder">
</form>
</div>
<div id="message">
<h3>Şifre aşağıdaki gibi içermelidir:</h3>
<p id="letter" class="invalid">Bir <b>küçük harf</b> harfi</p>
<p id="capital" class="invalid">Bir <b>büyük harf (üçgen)</b> harfi</p>
<p id="number" class="invalid">Bir <b>sayı</b></p>
<p id="length" class="invalid">Minimum <b>8 karakter</b></p>
</div>
Dikkat:Şifre alanında pattern özelliğini (daha karmaşık bir düzenleme ile) kullanarak formun sunumunu sınırlarız: En az 8 karakter içermelidir, en az bir rakam, büyük harf ve küçük harf olmalıdır.
İkinci adım - CSS ekleyin:
Giriş alanları ve mesaj kutusunun stili ayarlanır:
/* Tüm giriş alanlarının stili ayarlanır */
input {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
}
/* Ayarlar sunma butonunun stili */
input[type=submit] {
background-color: #04AA6D;
color: white;
}
/* Giriş konteynerinin tarzını ayarla */
.container {
background-color: #f1f1f1;
padding: 20px;
}
/* Kullanıcı şifre alanına tıkladığında mesaj kutusunu göster */
#message {
display:none;
background: #f1f1f1;
color: #000;
position: relative;
padding: 20px;
margin-top: 10px;
}
#message p {
padding: 10px 35px;
font-size: 18px;
}
/* Talep doğru olduğunda, yeşil metin rengi ve işaret işareti ekle */
.valid {
color: green;
}
.valid:before {
position: relative;
left: -35px;
content: "✔";
}
/* Hata talep edildiğinde, kırmızı metin rengi ve bir "x" simgesi ekle. */
.invalid {
color: red;
}
.invalid:before {
position: relative;
left: -35px;
content: "✖";
}
Üçüncü Adım - JavaScript Ekle:
<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");
// Kullanıcı şifre alanına tıkladığında mesaj kutusunu göster
myInput.onfocus = function() {
document.getElementById("message").style.display = "block";
}
// Kullanıcı şifre alanının dışına tıkladığında mesaj kutusunu gizle
myInput.onblur = function() {
document.getElementById("message").style.display = "none";
}
// When the user starts typing in 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");
}
// Verify uppercase 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");
}
// Verify numbers
var numbers = /[0-9]/g;
if(myInput.value.match(numbers)) {
number.classList.remove("invalid");
number.classList.add("valid");
} else {
number.classList.remove("valid");
number.classList.add("invalid");
}
// Verify length
if(myInput.value.length >= 8) {
length.classList.remove("invalid");
length.classList.add("valid");
} else {
length.classList.remove("valid");
length.classList.add("invalid");
}
}
</script>
İlgili sayfalar
Eğitim:HTML formu
- Önceki sayfa Geri tuşuna basarak düğmeyi tetikleme
- Geri sayfa Sonraki sayfa
