HTML pattern एट्रिब्यूट: इनपुट वैलिडेशन के लिए रेगुलर एक्सप्रेशन

HTML pattern एट्रिब्यूट एक रेगुलर एक्सप्रेशन (RegExp) निर्दिष्ट करता है जिसका मिलान <input> एलिमेंट के मान से किया जाता है फॉर्म सबमिशन के दौरान। यह कस्टम वैलिडेशन नियमों के लिए शक्तिशाली टूल है जैसे पासवर्ड जटिलता, फोन नंबर प्रारूप, कस्टम आईडी प्रारूप, आदि।

सिंटैक्स (Syntax)

<input pattern="regular_expression">

नोट: पैटर्न पूरी स्ट्रिंग से मेल खाना चाहिए (अंतर्निहित ^...$)। फ्लैग्स (जैसे i, g) समर्थित नहीं हैं।

उदाहरण (Example)

यह उदाहरण न्यूनतम 8 अक्षरों का पासवर्ड मान्य करता है।

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      color: #000;
      height: 100vh;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
      text-align: center;
      font-family: Arial, sans-serif;
    }
    input[type='password'] {
      width: 300px;
      padding: 12px 16px;
      border: 2px solid #fff;
      background: transparent;
      border-radius: 20px;
      display: block;
      margin: 1rem auto;
      outline: none;
      font-size: 1rem;
    }
    input[type='password']:focus {
      border-color: #db133a;
      box-shadow: 0 0 0 3px rgba(219, 19, 58, 0.2);
    }
    .btn {
      background: #db133a;
      border: none;
      height: 2.5rem;
      border-radius: 20px;
      width: 330px;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
      font-size: 1rem;
      transition: background 0.3s;
    }
    .btn:hover {
      background: #b01030;
    }
    ::placeholder {
      color: #666;
    }
    .show {
      font-size: 1.2rem;
      color: #fff;
      margin-top: 1rem;
      min-height: 80px;
    }
    .requirements {
      text-align: left;
      max-width: 330px;
      margin: 1rem auto;
      background: rgba(255,255,255,0.1);
      padding: 1rem;
      border-radius: 10px;
      font-size: 0.9rem;
    }
    .requirements ul { margin: 0.5rem 0; padding-left: 1.5rem; }
    .valid { color: #4ade80; }
    .invalid { color: #f87171; }
  </style>
</head>
<body>
  <h1>HTML pattern एट्रिब्यूट डेमो</h1>
  
  <form action="">
    <div class="requirements">
      <strong>पासवर्ड आवश्यकताएं:</strong>
      <ul>
        <li id="req-length" class="invalid">न्यूनतम 8 अक्षर</li>
        <li id="req-upper" class="invalid">कम से कम 1 बड़ा अक्षर</li>
        <li id="req-lower" class="invalid">कम से कम 1 छोटा अक्षर</li>
        <li id="req-number" class="invalid">कम से कम 1 संख्या</li>
        <li id="req-special" class="invalid">कम से कम 1 विशेष अक्षर (!@#$%^&*)</li>
      </ul>
    </div>
    
    <input type="password" 
           id="passwordInput"
           placeholder="अपना पासवर्ड दर्ज करें" 
           required 
           pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*]).{8,}">
    <input type="submit" value="सबमिट करें" class="btn">
  </form>
  
  <div class="show" id="statusDisplay"></div>

  <script>
    const passwordInput = document.getElementById('passwordInput');
    const statusDisplay = document.getElementById('statusDisplay');
    
    // रियल-टाइम फीडबैक
    passwordInput.addEventListener('input', function() {
      const value = this.value;
      const checks = {
        length: value.length >= 8,
        upper: /[A-Z]/.test(value),
        lower: /[a-z]/.test(value),
        number: /\d/.test(value),
        special: /[!@#$%^&*]/.test(value)
      };
      
      // आवश्यकताएं अपडेट करें
      Object.keys(checks).forEach(key => {
        const el = document.getElementById('req-' + key);
        if (checks[key]) {
          el.className = 'valid';
          el.innerHTML = '✓ ' + el.textContent.replace(/^[✓✗]\s*/, '');
        } else {
          el.className = 'invalid';
          el.innerHTML = '✗ ' + el.textContent.replace(/^[✓✗]\s*/, '');
        }
      });
      
      // वैलिडिटी स्थिति
      if (this.validity.valid) {
        statusDisplay.innerHTML = '<p style="color: #4ade80;">✓ पासवर्ड सभी आवश्यकताओं को पूरा करता है।</p>';
      } else if (value.length > 0) {
        statusDisplay.innerHTML = '<p style="color: #fbbf24;">⚠ पासवर्ड आवश्यकताओं को पूरा नहीं करता।</p>';
      } else {
        statusDisplay.innerHTML = '';
      }
    });
    
    // फॉर्म सबमिशन
    document.querySelector('form').addEventListener('submit', function(e) {
      e.preventDefault();
      if (passwordInput.validity.valid) {
        statusDisplay.innerHTML = '<p style="color: #4ade80; font-size: 1.5rem;">✓ फॉर्म सफलतापूर्वक सबमिट हुआ!</p>';
      } else {
        passwordInput.reportValidity();
      }
    });
  </script>
</body>
</html>

आउटपुट (Output)

पासवर्ड फील्ड में टाइप करते समय रियल-टाइम फीडबैक:

8 अक्षरों से कम पासवर्ड सबमिट करने पर ब्राउज़र चेतावनी:

वैध पासवर्ड के साथ सफल सबमिशन:

सामान्य पैटर्न उदाहरण

महत्वपूर्ण नोट्स

• title एट्रिब्यूट: कस्टम त्रुटि संदेश के लिए title="आपका संदेश" जोड़ें (कुछ ब्राउज़र दिखाते हैं)।
• केस सेंसिटिव: पैटर्न केस-सेंसिटिव होते हैं। केस-इनसेंसिटिव के लिए (?i) उपयोग करें (सभी ब्राउज़र समर्थन नहीं करते)।
• JavaScript RegExp अंतर: HTML pattern जावास्क्रिप्ट RegExp जैसा ही है लेकिन फ्लैग्स के बिना।
• सुरक्षा: क्लाइंट-साइड वैलिडेशन सुविधा के लिए है; हमेशा सर्वर-साइड भी मान्य करें।
• पहुंचयोग्यता: स्क्रीन रीडर के लिए aria-describedby के साथ सहायक पाठ जोड़ें।

ब्राउज़र समर्थन

सभी आधुनिक ब्राउज़र (Chrome 5+, Firefox 4+, Safari 10.1+, Edge 12+, IE 10+, Opera 11+)。