Bagaimanakah Saya Boleh Mengesahkan Alamat E-mel Menggunakan Ungkapan Biasa JavaScript?

Pengesahan E-mel dengan Ungkapan Biasa dalam JavaScript

Untuk mengelakkan input pengguna yang salah, JavaScript membenarkan pengesahan alamat e-mel sebelum cuba menghantarnya kepada pelayan atau cuba menghantar e-mel kepada mereka.

Pendekatan yang paling boleh dipercayai untuk mengesahkan alamat e-mel dalam JavaScript ialah untuk menggunakan ungkapan biasa. Ungkapan biasa berikut menerima aksara ASCII:

const validateEmail = (email) => {
  return String(email)
    .toLowerCase()
    .match(
      /^(([^<>()[\]\.,;:\s@"]+(\.[^<>()[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
    );
};

Untuk sokongan unikod, regex yang lebih komprehensif boleh digunakan:

const re =
  /^(([^<>()[\]\.,;:\s@"]+(\.[^<>()[\]\.,;:\s@"]+)*)|(".+"))@(([^<>()[\]\.,;:\s@"]+\.)+[^<>()[\]\.,;:\s@"]{2,})$/i;

Walau bagaimanapun, adalah penting untuk diingat bahawa pengesahan JavaScript tidak sepatutnya bergantung sahaja. Pengesahan pihak pelanggan mudah dipintas. Pengesahan bahagian pelayan juga diperlukan.

Berikut ialah contoh pengesahan e-mel JavaScript pada bahagian klien:

const validateEmail = (email) => {
  return email.match(
    /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  );
};

const validate = () => {
  const $result = $('#result');
  const email = $('#email').val();
  $result.text('');

  if(validateEmail(email)){
    $result.text(email + ' is valid.');
    $result.css('color', 'green');
  } else{
    $result.text(email + ' is invalid.');
    $result.css('color', 'red');
  }
  return false;
}

$('#email').on('input', validate);

Dalam contoh ini, butang digunakan untuk mencetuskan pengesahan dan memaparkan hasil.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengesahkan Alamat E-mel Menggunakan Ungkapan Biasa JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!