نحوه اعتبارسنجی ایمیل در جاوا اسکریپت: چهار روش قابل اعتماد

در حدود 30٪ از آدرس‌های ایمیل موجود در یک لیست، در عرض یک سال خراب می‌شوند و اگر بیش از 10٪ از لیست شما نامعتبر باشد، کمتر از 44٪ از ایمیل‌های شما تحویل داده می‌شوند. بسیاری از این آدرس‌های بد از طریق فرم‌هایی با اعتبارسنجی ضعیف وارد پایگاه‌های داده می‌شوند.

اعتبارسنجی ایمیل در جاوا اسکریپت به صورت لایه لایه انجام می‌شود. بررسی اینکه آیا یک آدرس به درستی قالب‌بندی شده است یا خیر، نسبتاً ساده است. تأیید اینکه دامنه می‌تواند ایمیل دریافت کند، پیشرفته‌تر است، اما هنوز هم امکان‌پذیر است. بخش دشوار، تأیید این است که خود صندوق پستی واقعاً وجود دارد و می‌تواند پیام‌ها را بپذیرد، و جاوا اسکریپتِ فقط مرورگر نمی‌تواند این کار را به تنهایی انجام دهد.

اعتبارسنجی معمولاً در سه سطح انجام می‌شود: نحو، دامنه و صندوق پستی. جاوا اسکریپت بررسی‌های نحو را به خوبی انجام می‌دهد، در حالی که کتابخانه‌ها و APIها می‌توانند به تأیید دامنه‌ها کمک کنند. با این حال، تأیید صندوق پستی نیاز به یک درخواست API سمت سرور دارد زیرا مرورگر نمی‌تواند مستقیماً تأیید کند که آیا یک صندوق ورودی واقعی است یا خیر.

روش‌های اعتبارسنجی ایمیل در جاوا اسکریپت

هر روش زیر یک لایه به مجموعه اعتبارسنجی شما اضافه می‌کند. این روش‌ها از ساده‌ترین تا کامل‌ترین مرتب شده‌اند. اکثر برنامه‌های کاربردی حداقل از دو روش استفاده می‌کنند، در حالی که جریان‌های ثبت نام با اهمیت امنیتی از هر چهار روش استفاده می‌کنند.

۱. ویژگی type=”email” در HTML5

ساده‌ترین نقطه شروع اعتبارسنجی ایمیل با جاوا اسکریپت، ویژگی type=”email” در عنصر ورودی HTML5 است. مرورگرها هنگام ارسال فرم، اعتبارسنجی قالب اولیه را به طور خودکار اعمال می‌کنند.

آدرس ایمیل

ارسال

مرورگر قبل از اجازه ارسال، بررسی می‌کند که فیلد حاوی نماد @ و یک رشته شبیه دامنه باشد. اعتبارسنجی به طور پیش‌فرض پس از ارسال اجرا می‌شود.

با این حال، بررسی HTML5 بسیار ابتدایی است. آدرس‌هایی مانند a@b یا user@domain را می‌پذیرد، حتی اگر هرگز ایمیل‌های واقعی دریافت نکنند. همچنین در حالی که کسی در حال تایپ است، بازخورد زنده ارائه نمی‌دهد. بنابراین، از آن به عنوان نقطه شروع استفاده کنید: همیشه آن را لحاظ کنید، اما هرگز به عنوان تنها بررسی خود به آن تکیه نکنید.

۲. اعتبارسنجی با الگوی Regex

Regex (عبارات منظم) رایج‌ترین روش اعتبارسنجی ایمیل جاوا اسکریپت است. این روش به شما امکان اعمال قالب‌بندی را می‌دهد که بر اساس تقاضا، قبل از ارسال فرم، اجرا می‌شود و بازخورد فوری تولید می‌کند.

در اینجا یک عبارت منظم (regex) پایه وجود دارد که رایج‌ترین قالب‌های معتبر را پوشش می‌دهد:

تابع isValidEmail(ایمیل) {

const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

عبارت منظم (regex.test(email را برمی‌گرداند)؛

}

// کاربرد

console.log(isValidEmail(“[ایمیل محافظت شده]"))؛ // درست است

console.log(isValidEmail("notanemail")); // نادرست

درک الگو:

• ^ — شروع رشته
• ‎[^\s@]+ — یک یا چند کاراکتر که فاصله یا @ نیستند
• @ — نماد @ به معنای واقعی کلمه
• ‎[^\s@]+ — یک یا چند کاراکتر بعد از @ (دامنه)
• \. — یک نقطه واقعی
• ‎[^\s@]+$ — یک یا چند کاراکتر بعد از نقطه (TLD)‎

برای اعتبارسنجی دقیق‌تر مطابق با RFC 5322، می‌توانید از الگوی خاص‌تری استفاده کنید:

تابع isValidEmail(ایمیل) {

const regex = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*\.[a-zA-Z]{2,}$/;

عبارت منظم (regex.test(email را برمی‌گرداند)؛

}

قرار دادن regex در یک تابع قابل استفاده مجدد مانند isValidEmail() منطق اعتبارسنجی شما را در یک مکان نگه می‌دارد و به‌روزرسانی آن را آسان می‌کند.

بزرگترین محدودیت این است که regex فقط فرمت را بررسی می‌کند. نمی‌تواند تشخیص دهد که آیا یک دامنه وجود دارد یا خیر یا اینکه آیا یک صندوق پستی واقعی است یا خیر. آدرسی مانند [ایمیل محافظت شده] همچنان پذیرفته خواهد شد زیرا فرمت معتبر به نظر می‌رسد، حتی با اینکه دامنه اشتباه تایپی است و ایمیل احتمالاً هرگز تحویل داده نخواهد شد.

۳. استفاده از کتابخانه اعتبارسنجی جاوا اسکریپت

کتابخانه‌های جاافتاده‌ای مانند validator.js بسیاری از مواردی را که الگوهای regex اولیه از دست می‌دهند، از جمله دامنه‌های بین‌المللی، قالب‌های ایمیل غیرمعمول اما معتبر و پسوندهای دامنه جدیدتر، مدیریت می‌کنند. اگر برنامه شما از قبل از یک چارچوب اعتبارسنجی استفاده می‌کند، یک کتابخانه انتخاب بهتری نسبت به حفظ الگوهای regex سفارشی است.

نصب validator.js:

نصب اعتبارسنج npm

از آن در کد خود استفاده کنید:

اعتبارسنج را از 'validator' وارد کنید؛

تابع isValidEmail(ایمیل) {

تابع ()validator.isEmail را برمی‌گرداند.

}

// کاربرد

console.log(isValidEmail(“[ایمیل محافظت شده]"))؛ // درست است

console.log(isValidEmail(“[ایمیل محافظت شده]"))؛ // نادرست

console.log(isValidEmail("user@example")); // نادرست

متد validator.isEmail() بررسی فرمت کامل‌تری نسبت به یک regex ساده انجام می‌دهد و بسیاری از مشکلات رایج قالب‌بندی را تشخیص می‌دهد.

با این حال، محدودیت یکسان است: کتابخانه‌ها فقط ساختار را اعتبارسنجی می‌کنند، نه قابلیت تحویل را. آدرسی مانند [ایمیل محافظت شده] هنوز هم قبول است زیرا قالب از نظر فنی صحیح است. برای جریان‌های ثبت نام در محیط عملیاتی که کیفیت لیست اهمیت دارد، این متد به یک فراخوانی API در کنار آن نیاز دارد.

۴. اعتبارسنجی با API اعتبارسنجی ایمیل

یک رویکرد مبتنی بر API تنها روشی است که می‌تواند وجود یک صندوق پستی را تأیید کند. روش‌هایی که تاکنون پوشش داده شده‌اند فقط قالب یک آدرس ایمیل را تأیید می‌کنند. یک API بررسی می‌کند که آیا آدرس واقعاً می‌تواند ایمیل دریافت کند یا خیر.

La API اعتبارسنجی ایمیل DeBounce سینتکس، رکوردهای MX دامنه، وجود صندوق پستی، وضعیت آدرس‌های یکبار مصرف، حساب‌های کاربری نقش و رفتار دامنه را در یک فراخوانی API بررسی می‌کند. در اینجا مثالی از استفاده از fetch() در جاوا اسکریپت آورده شده است:

تابع async، ایمیل را با API معتبر می‌کند (ایمیل) {

const apiKey = 'کلید API شما';

const url = `https://api.debounce.io/v1/?api=${apiKey}&email=${encodeURIComponent(email)}`;

تلاش كردن {

پاسخ const = منتظر دریافت (url)؛

const data = await response.json();

برگشت {

نتیجه: data.debounce?.result

دلیل: data.debounce?.reason

free_email: data.debounce?.free_email === “true” || data.debounce?.free_email === true,

منظورت این بود: حذف داده؟ منظورت این بود،

نقش: data.debounce?.role === “true” || data.debounce?.role === true

};

} catch (خطا) {

console.error('خطای اعتبارسنجی:', خطا);

برگشت تهی؛

}

}

توسعه‌دهندگان فیلدهای پاسخ، بیشترین اهمیت را به موارد زیر می‌دهند:

• نتیجه - حکم سطح بالا: «ارسال امن»، «خطرناک» یا «نامعتبر»
• دلیل - یافته خاص: قابل تحویل، یکبار مصرف، همه چیز را شامل می‌شود، خطای نحوی و غیره.
• did_you_mean — آدرس اصلاح‌شده در صورتی که API یک غلط املایی رایج را تشخیص دهد (مثلاً gmial.com → gmail.com)
• free_email — اینکه آیا آدرس متعلق به یک ارائه‌دهنده رایگان مانند Gmail یا Yahoo است یا خیر

به طور خاص، برای تشخیص ایمیل‌های یکبار مصرف سمت کلاینت، DeBounce نیز ارائه می‌دهد API ایمیل یکبار مصرف رایگان که می‌توانید مستقیماً از مرورگر و بدون افشای کلید API اصلی خود، آن را فراخوانی کنید.

اگر ترجیح می‌دهید اصلاً هیچ کدی ننویسید، ابزارک اعتبارسنجی جاوا اسکریپت با یک تگ اسکریپت نصب می‌شود و اعتبارسنجی را مستقیماً روی فرم‌های شما بدون نیاز به یکپارچه‌سازی سفارشی انجام می‌دهد.

پیاده‌سازی اعتبارسنجی ایمیل به صورت بلادرنگ

اعتبارسنجی ایمیل در لحظه، هم تجربه کاربری و هم کیفیت داده‌ها را بهبود می‌بخشد، زیرا کاربران می‌توانند اشتباهات را فوراً برطرف کنند، به جای اینکه منتظر ارسال فرم بمانند. بخش مهم، انتخاب رویداد مناسب برای نوع اعتبارسنجی است که اجرا می‌کنید.

تابع oninput با هر ضربه کلید فعال می‌شود، که آن را برای بررسی‌های سریع مانند اعتبارسنجی regex مفید می‌کند. تابع onchange پس از اینکه فیلد فوکوس خود را از دست می‌دهد، فعال می‌شود و آن را برای اعتبارسنجی API مناسب‌تر می‌کند، زیرا منتظر می‌ماند تا کاربر تایپ خود را تمام کند و سپس درخواستی ارسال کند.

در اینجا یک تنظیم ساده و بلادرنگ با استفاده از oninput و بررسی regex آورده شده است:

const emailInput = document.getElementById('ایمیل');

const feedbackEl = document.getElementById('email-feedback');

emailInput.addEventListener('ورودی', تابع () {

ایمیل ثابت = this.value;

اگر (طول ایمیل === 0) {

feedbackEl.textContent = ”;

this.classList.remove('معتبر'، 'نامعتبر')؛

بازگشت؛

}

اگر (isValidEmail(email)) {

‎this.classList.add('معتبر');‎

this.classList.remove('نامعتبر');

feedbackEl.textContent = '✓ خوب به نظر می‌رسد';

} دیگری {

‎this.classList.add('نامعتبر');‎

this.classList.remove('معتبر');

feedbackEl.textContent = 'لطفاً یک آدرس ایمیل معتبر وارد کنید';

}

})؛

هنگام استفاده از یک متد API، فراخوانی را debounce کنید و منتظر بمانید تا کاربر تایپ کردن را به مدت ۳۰۰ تا ۵۰۰ میلی‌ثانیه متوقف کند و سپس درخواست را اجرا کنید. این کار از ارسال فراخوانی API برای هر ضربه کلید جزئی جلوگیری می‌کند:

بگذارید debounceTimer؛

emailInput.addEventListener('ورودی', تابع () {

clearTimeout(debounceTimer);

debounceTimer = setTimeout(() => {

validateEmailWithAPI(this.value).then(result => {

اگر (نتیجه؟.did_you_mean) {

feedbackEl.textContent = `آیا منظورتان ${result.did_you_mean} بود؟`;

}

})؛

}، 400)؛

})؛

بازخورد خوب و به‌موقع، واضح و مشخص است. «منظورت این بود که [ایمیل محافظت شده]«؟» مفید است، در حالی که پیام‌های عمومی مانند «ایمیل نامعتبر» کاربران را ناامید می‌کند و باعث افزایش ترک فرم می‌شود.

اعتبارسنجی ایمیل در فریم‌ورک‌های محبوب جاوا اسکریپت

کتابخانه‌های فرم در سطح فریم‌ورک، مدیریت وضعیت، نمایش خطا و منطق ارسال را مدیریت می‌کنند، بنابراین فعال کردن اعتبارسنجی معمولاً به معنای تعیین یک قانون به جای تنظیم دستی رویدادها است.

با فرم React Hook واکنش نشان دهید:

وارد کردن {useForm} از 'react-hook-form';

تابع پیش‌فرض Export SignupForm() {

const { ثبت، ارسال دسته‌ای، وضعیت فرم: { خطاها } } = useForm();

برگشت (

console.log(data))}>

{…ثبت نام('ایمیل', {

required: 'ایمیل الزامی است',

الگو: {

مقدار: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,

پیام: 'یک آدرس ایمیل معتبر وارد کنید'

}

})}

/>

{errors.email && {errors.email.message} }

ثبت نام کنید

);

}

Vue با VeeValidate:

وارد کردن {useField، useForm } از 'vee-validate';

صادرات پیش فرض {

تنظیمات () {

const { handleSubmit } = useForm();

const { مقدار: ایمیل، errorMessage } = useField('ایمیل'، (val) => {

return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val) || 'یک آدرس ایمیل معتبر وارد کنید';

})؛

const onSubmit = handleSubmit(values ​​=> console.log(values));

return {ایمیل، errorMessage، onSubmit};

}

};

اعتبارسنجی طرحواره با Zod یا Yup (وقتی می‌خواهید منطق اعتبارسنجی را بین کلاینت و سرور به اشتراک بگذارید، مفید است):

وارد کردن {z} از 'zod';

const emailSchema = z.string().email('یک آدرس ایمیل معتبر وارد کنید');

تابع validateEmail(ایمیل) {

const result = emailSchema.safeParse(email);

return result.success ? null: result.error.issues[0].message; // برگرداندن نتیجه‌ی موفقیت‌آمیز ?

}

در هر سه مورد، چارچوب، تنظیمات را مدیریت می‌کند در حالی که شما قانون اعتبارسنجی را ارائه می‌دهید. اگر بعداً regex را با یک فراخوانی API جایگزین کنید، ساختار کلی تقریباً یکسان باقی می‌ماند.

محدودیت‌های اعتبارسنجی ایمیل سمت کلاینت

اعتبارسنجی سمت کلاینت می‌تواند بررسی کند که آیا یک آدرس ایمیل معتبر به نظر می‌رسد یا خیر، اما نمی‌تواند تشخیص دهد که آیا آدرس واقعاً کار می‌کند یا خیر. در اینجا چند مشکل وجود دارد که جاوا اسکریپت به تنهایی نمی‌تواند آنها را تشخیص دهد.

1. غلط املایی در دامنه‌های واقعی: آدرس‌هایی مانند [ایمیل محافظت شده], [ایمیل محافظت شده]، یا [ایمیل محافظت شده] اعتبارسنجی قالب را با موفقیت پشت سر بگذارید، حتی اگر دامنه‌ها غلط املایی داشته باشند. ایمیل هرگز به کاربر نمی‌رسد و آدرس در لیست شما باقی می‌ماند و باعث بازگشت ایمیل می‌شود.
2. آدرس‌های ایمیل یکبار مصرف و موقت: سرویس‌هایی مانند 10minutemail.com و quarialmail.com صندوق‌های ورودی موقت ایجاد می‌کنند که از بررسی‌های اعتبارسنجی عبور می‌کنند. کاربران اغلب آنها را برای عبور از فرم‌های ثبت نام وارد می‌کنند، سپس آدرس کمی بعد ناپدید می‌شود.
3. دامنه‌های همه‌گیر: برخی از دامنه‌ها طوری پیکربندی شده‌اند که هر ایمیلی که به آنها ارسال می‌شود را بپذیرند، صرف نظر از اینکه آیا صندوق پستی خاصی وجود دارد یا خیر. یک آدرس در یک دامنه همه‌گیر، اعتبارسنجی قالب، بررسی‌های MX و حتی برخی از بررسی‌های SMTP را با موفقیت پشت سر می‌گذارد، در حالی که در عمل هنوز قابل تحویل نیست.
4. آدرس‌های مبتنی بر نقش: آدرس‌هایی مانند info@، sales@، admin@ و support@ معمولاً به جای افراد، توسط تیم‌ها مدیریت می‌شوند. آن‌ها نرخ شکایت بالاتری ایجاد می‌کنند و معمولاً انتخاب‌های ضعیفی برای لیست‌های بازاریابی هستند. یک الگوی regex نمی‌تواند به طور قابل اعتمادی آن‌ها را شناسایی کند.
5. تله‌های اسپم: این‌ها آدرس‌های ایمیلی هستند که توسط سازمان‌های ارائه‌دهنده خدمات ایمیل برای شناسایی فرستندگانی که فهرست ایمیل ضعیفی دارند، استفاده می‌شوند. آن‌ها کاملاً طبیعی به نظر می‌رسند و اعتبارسنجی سمت کلاینت را پشت سر می‌گذارند، اما ارسال به آن‌ها می‌تواند به اعتبار فرستنده شما آسیب برساند.

API اعتبارسنجی ایمیل DeBounce هر پنج مشکل را از طریق بررسی‌های بلادرنگ در سطح صندوق پستی و به‌روزرسانی مداوم داده‌های اعتبارسنجی، شناسایی می‌کند. برای حفظ کیفیت لیست در درازمدت، ابزارهای تایید ایمیل همچنین می‌تواند مخاطبین قدیمی‌تر را به صورت عمده دوباره بررسی کند و به حذف آدرس‌هایی که به مرور زمان نامعتبر می‌شوند، کمک کند.

بهترین روش‌ها برای اعتبارسنجی ایمیل در جاوا اسکریپت

اعتبارسنجی خوب ایمیل از چندین بررسی همزمان برای بهبود کیفیت داده‌ها، تجربه کاربری و قابلیت تحویل استفاده می‌کند.

• اعتبارسنجی خود را لایه‌بندی کنید: با ویژگی ایمیل HTML5 شروع کنید، یک regex یا کتابخانه اعتبارسنجی اضافه کنید، سپس از یک فراخوانی API برای تأیید در سطح صندوق پستی استفاده کنید. هر لایه مشکلاتی را که لایه قبلی از دست داده است، شناسایی می‌کند، در حالی که بررسی‌های قبلی بدون انتظار برای درخواست شبکه، بازخورد فوری ارائه می‌دهند.
• هرگز برای جریان‌های امنیتی حیاتی، تنها به اعتبارسنجی سمت کلاینت تکیه نکنید: اعتبارسنجی مبتنی بر مرورگر قابل دور زدن است، بنابراین آدرس‌های ایمیل همیشه باید قبل از پردازش ثبت نام‌ها، خریدها یا ایجاد حساب کاربری، دوباره روی سرور اعتبارسنجی شوند.
• به جای نگهداری بلندمدت از regex سفارشی، از یک کتابخانه یا API امتحان‌شده استفاده کنید: قالب‌های آدرس ایمیل تکامل می‌یابند. یک کتابخانه یا API که به طور فعال نگهداری می‌شود، موارد جدید را بدون نیاز به به‌روزرسانی الگوهای شما، مدیریت می‌کند.
• فراخوانی‌های API را رد کنید و بازخورد بصری واضحی ارائه دهید: یک نشانگر بارگذاری هنگام اجرای API، یک علامت سبز در صورت موفقیت، و یک پیام خطای خاص در صورت شکست ("منظورتان این بود که... [ایمیل محافظت شده]؟") فرم را واکنش‌گرا نگه دارید و میزان افت کاربر را کاهش دهید.
• نتایج اعتبارسنجی گزارش‌ها در طول توسعه: ارائه‌دهندگان ایمیل یکبار مصرف، اشتباهات تایپی مکرر و دامنه‌های مشکوک پس از بررسی گزارش‌ها آشکار می‌شوند و این امر، سخت‌گیری بیشتر در مورد قوانین اعتبارسنجی را در طول زمان آسان‌تر می‌کند.
• همچنین در سطح لیست اعتبارسنجی کنید: اعتبارسنجی بلادرنگ، آدرس‌های بد را در حین ثبت نام شناسایی می‌کند، در حالی که اعتبار سنجی لیست ایمیل به حذف آدرس‌هایی که بعداً غیرفعال می‌شوند کمک می‌کند.

خط پایین

اعتبارسنجی HTML5 بررسی‌های اولیه فرمت را به صورت رایگان در اختیار شما قرار می‌دهد. کتابخانه‌های Regex و اعتبارسنجی با بازخورد سریع سمت کلاینت، تجربه کاربری را بهبود می‌بخشند، در حالی که APIها تأیید می‌کنند که آیا یک صندوق پستی واقعاً وجود دارد و می‌تواند ایمیل دریافت کند یا خیر.

آخرین مرحله بیشترین اهمیت را دارد. اعتبارسنجی سمت کلاینت به تنهایی نمی‌تواند تأیید کند که یک آدرس واقعی، فعال یا ایمن برای ارسال است. برای فرم‌های ثبت نام در محیط عملیاتی که قابلیت تحویل و کیفیت لیست اهمیت دارد، اعتبارسنجی API همان چیزی است که از ورود ایمیل‌های یکبار مصرف، دامنه‌های دارای غلط املایی، آدرس‌های همه‌گیر و سایر مخاطبین بد به پایگاه داده شما جلوگیری می‌کند.

دفع اعتبار سنجی ایمیل تأیید سطح صندوق پستی را مستقیماً به جریان ثبت نام شما اضافه می‌کند و به مسدود کردن آدرس‌های بد قبل از اینکه بر اعتبار فرستنده شما تأثیر بگذارند، کمک می‌کند. اگر می‌خواهید راه‌اندازی سریع‌تری داشته باشید، ابزارک اعتبارسنجی جاوا اسکریپت روشی بدون کد برای افزودن اعتبارسنجی ایمیل بلادرنگ و مستقیماً به فرم‌های شما فراهم می‌کند.