Để tạo form xác thực mật khẩu với CSS và JavaScript, mã như sau:
Ví dụ
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> * { box-sizing: border-box; } input { width: 100%; padding: 12px; margin-top: 6px; margin-bottom: 16px; } input[type="submit"] { background-color: rgb(69, 27, 117); color: white; font-weight: bold; font-size: 20px; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } form { padding: 20px; } #checksField { display: none; background: #f1f1f1; color: #000; position: relative; padding: 20px; margin-top: 10px; } #checksField p { padding: 10px 35px; font-size: 18px; } .correct { color: rgb(28, 0, 128); } .correct:before { position: relative; left: -35px; content: "✔"; } .wrong { color: red; } .wrong:before { position: relative; left: -35px; content: "✖"; } </style> </head> <body> <h1 style="text-align: center;">Ví dụ Xác Thực Mật Khẩu</h1> <form> <label for="uname">Tên người dùng</label> <input type="text" id="uname" name="uname" required /> <label for="pass">Mật khẩu</label> <input type="password" id="pass" name="pass" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Phải chứa ít nhất một số, một chữ hoa, một chữ thường, và tối thiểu 8 ký tự" required /> <input type="submit" value="Gửi" /> </form> <div id="checksField"> <h3>Mật khẩu phải chứa:</h3> <p id="letter" class="wrong">Một chữ <b>thường</b></p> <p id="capital" class="wrong">Một chữ <b>HOA</b></p> <p id="number" class="wrong">Một <b>số</b></p> </div> <script> var myInput = document.getElementById("pass"); var letter = document.getElementById("letter"); var capital = document.getElementById("capital"); var number = document.getElementById("number"); myInput.onfocus = function() { document.getElementById("checksField").style.display = "block"; }; myInput.onblur = function() { document.getElementById("checksField").style.display = "none"; }; myInput.onkeyup = function() { var lowerCaseLetters = /[a-z]/g; if (myInput.value.match(lowerCaseLetters)) { letter.classList.remove("wrong"); letter.classList.add("correct"); } else { letter.classList.remove("correct"); letter.classList.add("wrong"); } var upperCaseLetters = /[A-Z]/g; if (myInput.value.match(upperCaseLetters)) { capital.classList.remove("wrong"); capital.classList.add("correct"); } else { capital.classList.remove("correct"); capital.classList.add("wrong"); } var numbers = /[0-9]/g; if (myInput.value.match(numbers)) { number.classList.remove("wrong"); number.classList.add("correct"); } else { number.classList.remove("correct"); number.classList.add("wrong"); } }; </script> </body> </html>
Kết quả
Mã trên sẽ cho ra kết quả sau:
Khi nhập tên người dùng và mật khẩu:
