چگونه می توانم آدرس ایمیل را در جاوا اسکریپت تایید کنم؟

سوال

من میخواهم بررسی کنم که ورودی کاربر یک آدرس ایمیل در جاوا اسکریپت است، قبل از ارسال آن به سرور یا تلاش برای ارسال ایمیل به آن، تا از ابتدایی ‌ترین اشتباه تایپی جلوگیری شود. چگونه می توانم به این امر برسم؟

پاسخ

استفاده از عبارات منظم احتمالا بهترین راه است. می ‌توانید مجموعه‌ ای از آزمایش ‌ها را اینجا ببینید:

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,}))$/
    );
};

در اینجا مثالی از یک عبارت منظم است که یونیکد را می پذیرد:

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

اما به خاطر داشته باشید که نباید فقط به اعتبار سنجی جاوا اسکریپت اعتماد کرد. جاوا اسکریپت را می توان به راحتی غیر فعال کرد. این باید در سمت سرور نیز تایید شود.

در اینجا یک نمونه از موارد فوق در عمل آورده شده است:

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 not valid :(');
    $result.css('color', 'red');
  }
  return false;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="email">Enter an email address: </label>
<input id="email" />
<h2 id="result"></h2>

برای یادگیری جاوا اسکریپت می توانید از مسیر کارآموزی فرانت اند استفاده کنید.