ইমেইল ভ্যালিডেশন ওয়েব ডেভেলপমেন্টের একটি অত্যন্ত গুরুত্বপূর্ণ অংশ, যা ব্যবহারকারীদের ভুল ইনপুট থেকে রক্ষা করতে সাহায্য করে। এই টিউটোরিয়ালে আমরা HTML এবং জাভাস্ক্রিপ্ট ব্যবহার করে ইমেইল ভ্যালিডেশন কিভাবে করতে হয় তা বিস্তারিতভাবে আলোচনা করব।
প্রথমে একটি সাধারণ HTML ফর্ম তৈরি করি যা ব্যবহারকারীদের ইমেইল ইনপুট নেওয়ার জন্য ব্যবহৃত হবে।
<!DOCTYPE html> <html lang="bn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ইমেইল ভ্যালিডেশন</title> <style> body { font-family: Arial, sans-serif; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .container { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } .error { color: red; font-size: 0.875em; } </style> ⁢/head> <body> <div class="container"> <h1>ইমেইল ভ্যালিডেশন ফর্ম</h1> <form id="emailForm"> <label for="email">ইমেইল:</label> <input type="email" id="email" name="email" required> <span id="error" class="error"></span> <button type="submit">সাবমিট</button> </form> </div> <script src="script.js"></script> </body> </html>
এখন আমরা একটি script.js ফাইল তৈরি করব যা আমাদের ইমেইল ভ্যালিডেশন লজিক পরিচালনা করবে।
// script.js document.addEventListener('DOMContentLoaded', function() { const form = document.getElementById('emailForm'); const emailInput = document.getElementById('email'); const errorSpan = document.getElementById('error'); form.addEventListener('submit', function(event) { event.preventDefault(); // ফর্মের ডিফল্ট সাবমিট প্রতিরোধ const emailValue = emailInput.value; const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // সাধারণ ইমেইল প্যাটার্ন if (emailPattern.test(emailValue)) { errorSpan.textContent = ''; // কোনো ত্রুটি বার্তা নেই alert('ইমেইল সঠিকভাবে পাঠানো হয়েছে!'); } else { errorSpan.textContent = 'অনুগ্রহ করে একটি বৈধ ইমেইল ঠিকানা প্রদান করুন।'; } }); });
আমাদের emailPattern একটি সাধারণ রেগুলার এক্সপ্রেশন যা ইমেইল অ্যাড্রেস যাচাই করার জন্য ব্যবহৃত হয়।
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
এই প্যাটার্নটি মূলত নিম্নলিখিত নিয়ম অনুসরণ করে:
আপনি ইমেইল ভ্যালিডেশনের চাহিদা অনুযায়ী আরো কঠিন প্যাটার্ন ব্যবহার করতে পারেন, যেমন:
const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
এই প্যাটার্নটি কিছু অতিরিক্ত বৈশিষ্ট্য নিয়ে আসে:
এখন, ইমেইল ভ্যালিডেশনের ফলাফল কিভাবে সঠিকভাবে প্রদর্শন করা হয় তা নিশ্চিত করার জন্য আমরা কিছু অতিরিক্ত স্টাইলিং এবং জাভাস্ক্রিপ্ট ফাংশন যোগ করতে পারি।
// Additional JavaScript for validation result display function displayValidationResult(isValid, message) { if (isValid) { errorSpan.textContent = ''; alert('ইমেইল সঠিকভাবে পাঠানো হয়েছে!'); } else { errorSpan.textContent = message; } } form.addEventListener('submit', function(event) { event.preventDefault(); const emailValue = emailInput.value; const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; if (emailPattern.test(emailValue)) { displayValidationResult(true, ''); } else { displayValidationResult(false, 'অনুগ্রহ করে একটি বৈধ ইমেইল ঠিকানা প্রদান করুন।'); } });
আমাদের ফর্মে ব্যবহারকারীকে আরও ভালো অভিজ্ঞতা দিতে আমরা ব্রাউজার-বিল্ট ইন ইমেইল ভ্যালিডেশন ব্যবহার করতে পারি।
<input type="email" id="email" name="email" required>
এই required অ্যাট্রিবিউট ব্যবহারকারীকে ফর্ম জমা দিতে বাধা দেবে যতক্ষণ না তারা একটি বৈধ ইমেইল প্রদান করে।
ফর্ম জমা করার পর ইউজারের নিশ্চিতকরণ জানানোর জন্য একটি সামান্য পরিবর্তন করতে পারেন:
form.addEventListener('submit', function(event) { event.preventDefault(); const emailValue = emailInput.value; const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; if (emailPattern.test(emailValue)) { errorSpan.textContent = ''; if (confirm('আপনার দেয়া ইমেইল ঠিকানা সঠিক?')) { alert('ইমেইল সঠিকভাবে পাঠানো হয়েছে!'); } } else { errorSpan.textContent = 'অনুগ্রহ করে একটি বৈধ ইমেইল ঠিকানা প্রদান করুন।'; } });
ক্লায়েন্ট সাইড ভ্যালিডেশন শুধুমাত্র ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য; সার্ভার সাইডে ইমেইল ভ্যালিডেশন করা খুবই গুরুত্বপূর্ণ। একটি সার্ভার সাইড ভাষা যেমন পিএইচপি, পাইটন, বা নোড.জেএস ব্যবহার করে ইমেইল ভ্যালিডেশন নিশ্চিত করুন।
এই টিউটোরিয়ালে আমরা HTML এবং জাভাস্ক্রিপ্ট ব্যবহার করে ইমেইল ভ্যালিডেশন কিভাবে করতে হয় তা আলোচনা করেছি। আপনার ওয়েবসাইটের ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য এই পদ্ধতিগুলি ব্যবহারের চেষ্টা করুন।
এখন আপনি একটি কার্যকরী ইমেইল ভ্যালিডেশন সিস্টেম তৈরি করতে পারবেন যা ব্যবহারকারীদের ভুল ইনপুট থেকে রক্ষা করবে এবং তাদের উন্নত অভিজ্ঞতা প্রদান করবে।