বিবরণ
HTML DOM Input Password pattern প্রোপার্টি ব্যবহার করা হয় ইনপুট পাসওয়ার্ড ফিল্ডের pattern অ্যাট্রিবিউট সেট বা রিটার্ন করার জন্য। এটি পাসওয়ার্ডকে pattern প্রোপার্টিতে নির্দিষ্ট রেগুলার এক্সপ্রেশন দিয়ে চেক করে।
সিনট্যাক্স
Pattern প্রোপার্টি সেট করার সিনট্যাক্স:
passwordObject.pattern = regexp
এখানে, regexp হলো একটি রেগুলার এক্সপ্রেশন যার বিপরীতে পাসওয়ার্ড ফিল্ড চেক করা হবে।
উদাহরণ
Password pattern প্রোপার্টির জন্য একটি উদাহরণ:
<!DOCTYPE html> <html> <body> <h1>Input Password pattern property</h1> <p>The password can either be of three numeric characters or 6 alphabet characters from a to g</p> <form action="/Sample_page.php"> Password: <input type="password" id="PASS" name="passW" pattern="[0-9]{3}|[a-g]{6}" title="Three numeric character or 6 alphabet between a-g"> <input type="submit"> </form> <br> <button onclick="passPattern()">GET PATTERN</button> <p id="Sample"></p> <script> function passPattern() { var P = document.getElementById("PASS").pattern; document.getElementById("Sample").innerHTML ="The pattern attribute value is"+ P; } </script> </body> </html>
আউটপুট
এটি নিচের আউটপুট তৈরি করবে:
Regex অনুযায়ী মিল না খাওয়া পাসওয়ার্ড দিয়ে সাবমিট করার পর:
GET PATTERN বাটনে ক্লিক করার পর:
উদাহরণের ব্যাখ্যা
উপরোক্ত উদাহরণে:
- আমরা একটি ইনপুট এলিমেন্ট তৈরি করেছি যার type="password", id="PASS", name="passW" এবং pattern="[0-9]{3}|[a-g]{6}"। এখানে pattern অ্যাট্রিবিউটের মান একটি regex যা নির্দেশ করে যে আপনি অথবা তিনটি সংখ্যাগত অক্ষর অথবা a থেকে g পর্যন্ত ছয়টি অক্ষর দিতে পারেন। যদি ইনপুট এই regex এর সাথে মিল না খায় তবে title অ্যাট্রিবিউটের মান ইনপুট বক্সের ওপর দেখাবে। এই পাসওয়ার্ড ফিল্ড একটি ফর্মের ভেতরে আছে যার action অ্যাট্রিবিউট "/Sample_page.php"। সাবমিট বাটনে ক্লিক করলে ফর্ম ডেটা এখানে সাবমিট হবে।
- তারপর GET PATTERN বাটন তৈরি করা হয়েছে যা ক্লিক করলে passPattern() মেথড এক্সিকিউট হবে।
- passPattern() মেথড getElementById() ব্যবহার করে পাসওয়ার্ড টাইপের ইনপুট ফিল্ড পায় এবং এর pattern প্রোপার্টি পায় যা একটি স্ট্রিং টাইপের regex রিটার্ন করে। Regex স্ট্রিং P ভেরিয়েবলে অ্যাসাইন করা হয় এবং "Sample" id वाले প্যারাগ্রাফে innerHTML প্রোপার্টি ব্যবহার করে প্রদর্শন করা হয়।
