Πώς να δημιουργήσετε: Επαλήθευση Κωδικού Πρόσβασης
Μάθετε πώς να δημιουργήσετε φόρμας επαλήθευσης κωδικού πρόσβασης χρησιμοποιώντας CSS και JavaScript.

Δημιουργία φόρμας επαλήθευσης κωδικού πρόσβασης
Πρώτη Βήμα - Προσθήκη HTML:
<div class="container"> <form action="/action_page.php"> <label for="usrname">Username</label> <input type="text" id="usrname" name="usrname" required> <label for="psw">Κωδικός πρόσβασης</label> <input type="password" id="psw" name="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Πρέπει να περιέχει τουλάχιστον έναν αριθμό και μια μεγάλη και μια μικρή πεζή γραμματική, και τουλάχιστον 8 ή περισσότερους χαρακτήρες" required> <input type="submit" value="Υποβολή"> </form> </div> <div id="message"> <h3>Ο κωδικός πρόσβασης πρέπει να περιέχει τα εξής:</h3> <p id="letter" class="invalid">Μια <b>μικρή</b> πεζή γραμματική</p> <p id="capital" class="invalid">Μια <b>μεγάλη</b> πεζή γραμματική</p> <p id="number" class="invalid">Ένας <b>αριθμός</b></p> <p id="length" class="invalid">Μέγιστος <b>8 χαρακτήρες</b></p> </div>
Σημείωση:Χρησιμοποιούμε την ιδιότητα pattern (με τη ρητορική έκφραση) στο πεδίο κωδικού πρόσβασης για να θέσουμε τους περιορισμούς υποβολής φόρμας: πρέπει να περιέχει τουλάχιστον 8 χαρακτήρες, τουλάχιστον έναν αριθμό, μια μεγάλη και μια μικρή πεζή γραμματική.
Βήμα 2 - Προσθήκη CSS:
Ρύθμιση του στυλ των πεδίων εισαγωγής και των οθόνης μηνυμάτων:
/* Ρύθμιση του στυλ όλων των πεδίων εισαγωγής */ input { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; } /* Ζήτημα ρύθμισης του στυλ του κουμπιού υποβολής */ input[type=submit] { background-color: #04AA6D; color: white; } /* Ορισμός στυλ του κουτιού εισαγωγής */ .container { background-color: #f1f1f1; padding: 20px; } /* Εμφανίστε το πλαίσιο μηνυμάτων όταν ο χρήστης κάνει κλικ στο πεδίο κωδικού πρόσβασης */ #message { display:none; background: #f1f1f1; color: #000; position: relative; padding: 20px; margin-top: 10px; } #message p { padding: 10px 35px; font-size: 18px; } /* Προσθέστε πράσινη γραφή και εικονίδιο checkmark όταν είναι σωστό. */ .valid { color: green; } .valid:before { position: relative; left: -35px; content: "✔"; } /* Προσθέστε κόκκινη γραφή και εικονίδιο "x" όταν υπάρχει σφάλμα. */ .invalid { color: red; } .invalid:before { position: relative; left: -35px; content: "✖"; }
Τρίτο βήμα - Προσθέστε JavaScript:
<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"); // Όταν ο χρήστης κάνει κλικ στο πεδίο κωδικού πρόσβασης, εμφανίστε το πλαίσιο μηνυμάτων myInput.onfocus = function() { document.getElementById("message").style.display = "block"; } // Όταν ο χρήστης κάνει κλικ εκτός του πεδίου κωδικού πρόσβασης, κρύψτε το πλαίσιο μηνυμάτων 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"); } // Validate 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"); } // Validate 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"); } // Validate length if(myInput.value.length >= 8) { length.classList.remove("invalid"); length.classList.add("valid"); } else { length.classList.remove("valid"); length.classList.add("invalid"); } } </script>
相关页面
教程:HTML 表单