Share
Facebook
Twitter
LinkedIn
Whatsapp
Instagram
Messenger

জাভাস্ক্রিপ্ট ইমেইল ভ্যালিডেসন - JavaScript Email Validation


ইমেইল ভ্যালিডেশন ওয়েব ডেভেলপমেন্টের একটি অত্যন্ত গুরুত্বপূর্ণ অংশ, যা ব্যবহারকারীদের ভুল ইনপুট থেকে রক্ষা করতে সাহায্য করে। এই টিউটোরিয়ালে আমরা HTML এবং জাভাস্ক্রিপ্ট ব্যবহার করে ইমেইল ভ্যালিডেশন কিভাবে করতে হয় তা বিস্তারিতভাবে আলোচনা করব।


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 এবং জাভাস্ক্রিপ্ট ব্যবহার করে ইমেইল ভ্যালিডেশন কিভাবে করতে হয় তা আলোচনা করেছি। আপনার ওয়েবসাইটের ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য এই পদ্ধতিগুলি ব্যবহারের চেষ্টা করুন।

এখন আপনি একটি কার্যকরী ইমেইল ভ্যালিডেশন সিস্টেম তৈরি করতে পারবেন যা ব্যবহারকারীদের ভুল ইনপুট থেকে রক্ষা করবে এবং তাদের উন্নত অভিজ্ঞতা প্রদান করবে।