Pengesahan E-mel Sudut dengan Cip Bahan

Meningkatkan Input E-mel dengan Cip Bahan Sudut

Pelaksanaan Frontend menggunakan Angular dan 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);
  }
}

Pengesahan E-mel sisi pelayan untuk Cip Bahan Sudut

Pelaksanaan Bahagian Belakang menggunakan Node.js dan 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'));

Pengesahan E-mel dalam Sudut: Pertanyaan Biasa

1. Bagaimanakah anda mengesahkan e-mel menggunakan Cip Bahan Sudut?
2. Menggunakan Validators.pattern dengan ungkapan biasa untuk memastikan e-mel sepadan dengan format yang betul sebelum menambahkannya sebagai cip.
3. Bolehkah Cip Bahan Sudut mengendalikan berbilang e-mel?
4. Ya, cip boleh dikonfigurasikan untuk menerima berbilang e-mel, setiap satu diwakili sebagai cip berasingan dalam medan borang.
5. Apakah peranan FormControl dalam menguruskan kerepek?
6. FormControl menjejaki nilai dan status pengesahan cip individu, memudahkan penyepaduan dengan bentuk Sudut.
7. Bagaimanakah mesej ralat boleh dipaparkan dengan e-mel yang tidak sah?
8. Mesej ralat dipaparkan secara dinamik menggunakan mat-error tag yang bertindak balas kepada status pengesahan kawalan borang.
9. Adakah mungkin untuk menyesuaikan penampilan Cip Bahan Sudut?
10. Ya, Bahan Sudut membenarkan pilihan penggayaan dan tema yang meluas untuk menyesuaikan cip mengikut keperluan reka bentuk aplikasi anda.

Cerapan Akhir tentang Menggunakan Angular untuk Pengurusan Input E-mel Dipertingkat

Cip Bahan Sudut menawarkan penyelesaian yang praktikal dan menarik secara visual untuk mengurus berbilang input e-mel dalam bentuk. Dengan menyepadukan cip ini dengan ciri pengendalian dan pengesahan bentuk Angular yang berkuasa, pembangun boleh memberikan pengalaman pengguna yang jelas dan bebas ralat. Persediaan ini bukan sahaja membantu dalam mengurangkan ralat input pengguna tetapi juga dalam mempersembahkan ralat tersebut dengan cara yang intuitif, sekali gus meningkatkan kebolehgunaan keseluruhan aplikasi web yang memerlukan pengurusan input e-mel.