CSS और JavaScript से पासवर्ड वैलिडेशन फॉर्म कैसे बनाएं?

CSS और JavaScript का उपयोग करके पासवर्ड वैलिडेशन फॉर्म बनाने का पूरा कोड नीचे दिया गया है। यह रियल-टाइम फीडबैक दिखाता है कि पासवर्ड आवश्यकताओं को पूरा करता है या नहीं।

उदाहरण

<!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;">पासवर्ड वैलिडेशन उदाहरण</h1> 
  <form> 
    <label for="uname">यूजरनेम</label> 
    <input type="text" id="uname" name="uname" required /> 
    <label for="pass">पासवर्ड</label> 
    <input type="password" id="pass" name="pass" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="कम से कम एक नंबर, एक अपरकेस, एक लोअरकेस अक्षर और कम से कम 8 कैरेक्टर्स होने चाहिए" required /> 
    <input type="submit" value="सबमिट" /> 
  </form> 
  <div id="checksField"> 
    <h3>पासवर्ड में निम्नलिखित होना चाहिए:</h3> 
    <p id="letter" class="wrong">एक <b>लोअरकेस</b> अक्षर</p> 
    <p id="capital" class="wrong">एक <b>अपरकेस</b> अक्षर</p> 
    <p id="number" class="wrong">एक <b>नंबर</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>

आउटपुट

उपरोक्त कोड निम्नलिखित आउटपुट उत्पन्न करेगा:

यूजरनेम और पासवर्ड टाइप करने पर:

पासवर्ड आवश्यकताएं (पैटर्न समझाया गया):

pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"

HTML5 वैलिडेशन vs JavaScript वैलिडेशन:

पासवर्ड स्ट्रेंथ मीटर (उन्नत):

function calculateStrength(password) {
  let score = 0;
  if (password.length >= 8) score++;
  if (password.length >= 12) score++;
  if (/[a-z]/.test(password)) score++;
  if (/[A-Z]/.test(password)) score++;
  if (/[0-9]/.test(password)) score++;
  if (/[^A-Za-z0-9]/.test(password)) score++; // स्पेशल कैरेक्टर
  return score; // 0-6
}

// zxcvbn लाइब्रेरी (ड्रॉपबॉक्स) - अधिक सटीक
// import zxcvbn from 'zxcvbn';
// const result = zxcvbn(password);
// console.log(result.score); // 0-4

बेस्ट प्रैक्टिस:

• पासवर्ड नियम बहुत सख्त न रखें (यूजर फ्रस्ट्रेशन)
• पासवर्ड मैनेजर फ्रेंडली बनाएं
• ब्रीच्ड पासवर्ड चेक करें (HaveIBeenPwned API)
• 2FA (टू-फैक्टर ऑथ) को प्रोत्साहित करें