التحقق من صحة البريد الإلكتروني الزاوي باستخدام شرائح المواد

تعزيز إدخال البريد الإلكتروني باستخدام شرائح المواد الزاوية

تنفيذ الواجهة الأمامية باستخدام Angular وTypeScript

import { Component } from '@angular/core';
import { FormBuilder, FormControl, Validators } from '@angular/forms';
import { MatChipInputEvent } from '@angular/material/chips';
const REGEXP_EMAIL = /^(([^<>()[\\].,;:\\s@"]+(\\.[^<>()[\\].,;:\\s@"]+)*)|(".+"))@(([^<>()[\\].,;:\\s@"]+\\.)+[^<>()[\\].,;:\\s@"]{2,})$/i;
export function emailsArrayValidator(control: FormControl) {
  const emails: string[] = Array.isArray(control.value) ? control.value : [];
  const invalidEmails = emails.filter(email => !REGEXP_EMAIL.test(email.trim()));
  return invalidEmails.length === 0 ? null : { invalidEmails: true };
}
@Component({
  selector: 'app-invite-form',
  templateUrl: './invite-form.component.html',
})
export class InviteFormComponent {
  inviteForm = this.fb.group({
    name: ['', Validators.required],
    email: ['', [Validators.required, Validators.pattern(REGEXP_EMAIL)]],
    friends: [[], [Validators.required, Validators.minLength(1), emailsArrayValidator]],
  });
  constructor(private fb: FormBuilder) {}
  addFriend(event: MatChipInputEvent): void {
    const input = event.input;
    const value = event.value;
    if ((value || '').trim()) {
      const friends = [...this.inviteForm.value.friends, value.trim()];
      this.inviteForm.controls['friends'].setValue(friends);
      if (input) {
        input.value = '';
      }
    }
  }
  removeFriend(friend: string): void {
    const friends = this.inviteForm.value.friends.filter((f: string) => f !== friend);
    this.inviteForm.controls['friends'].setValue(friends);
  }
}

التحقق من صحة البريد الإلكتروني من جانب الخادم لرقائق المواد الزاوية

تنفيذ الواجهة الخلفية باستخدام Node.js وExpress

const express = require('express');
const router = express.Router();
const { body, validationResult } = require('express-validator');
router.post('/validate-emails', [
  body('emails').isArray(),
  body('emails.*').isEmail()],
  (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      return res.status(422).json({ errors: errors.array() });
    }
    res.send('Emails are valid');
});
const app = express();
app.use(express.json());
app.use('/api', router);
app.listen(3000, () => console.log('Server running on port 3000'));

التحقق من صحة البريد الإلكتروني في Angular: الاستعلامات الشائعة

1. كيف يمكنك التحقق من صحة البريد الإلكتروني باستخدام Angular Material Chips؟
2. استخدم ال Validators.pattern بتعبير عادي للتأكد من مطابقة البريد الإلكتروني للتنسيق الصحيح قبل إضافته كشريحة.
3. هل تستطيع Angular Material Chips التعامل مع رسائل البريد الإلكتروني المتعددة؟
4. نعم، يمكن تكوين الشرائح لقبول رسائل بريد إلكتروني متعددة، يتم تمثيل كل منها كشريحة منفصلة داخل حقل النموذج.
5. ما هو دور FormControl في إدارة الرقائق؟
6. FormControl يتتبع القيمة وحالة التحقق من صحة الشريحة الفردية، مما يسهل التكامل مع النماذج Angular.
7. كيف يمكن عرض رسائل الخطأ مع رسائل البريد الإلكتروني غير الصالحة؟
8. يتم عرض رسائل الخطأ ديناميكيًا باستخدام mat-error العلامة التي تتفاعل مع حالة التحقق من صحة عنصر تحكم النموذج.
9. هل من الممكن تخصيص مظهر رقائق المواد الزاويّة؟
10. نعم، تتيح Angular Material خيارات واسعة النطاق للتصميم والسمات لتخصيص الرقائق وفقًا لمتطلبات تصميم التطبيق الخاص بك.

رؤى نهائية حول استخدام Angular لتحسين إدارة إدخال البريد الإلكتروني

تقدم Angular Material Chips حلاً عمليًا وجذابًا لإدارة مدخلات البريد الإلكتروني المتعددة في النموذج. من خلال دمج هذه الرقائق مع ميزات Angular القوية للتعامل مع النماذج والتحقق من صحتها، يمكن للمطورين توفير تجربة مستخدم واضحة وخالية من الأخطاء. لا يساعد هذا الإعداد في تقليل أخطاء إدخال المستخدم فحسب، بل يساعد أيضًا في تقديم تلك الأخطاء بطريقة بديهية، وبالتالي تحسين قابلية الاستخدام الشاملة لتطبيقات الويب التي تتطلب إدارة إدخال البريد الإلكتروني.