Tutorial Membuat Validasi Email Menggunakan Javascript

thumbnail

Validasi email sangatlah penting dalam membuat suatu aplikasi. Email sudah banyak digunakan oleh semua orang didunia ini, bahkan satu orang bisa memiliki lebih dari satu email. Oleh karena itu, Email banyak digunakan sebagai salah satu syarat untuk memasuki suatu sistem.

Tentunya aplikasi yang kita buat tidak ingin dimasukin dengan bot ataupun orang yang memasukkan email asal-asalan. Standar suatu email biasanya adalah nama@domain.com atau bisa juga nama@domain.co.id, dsb. Oleh sebab itu, kita harus membuat validasi email untuk menjamin juga keamanan pada aplikasi yang akan dibuat.

Disini saya akan membuat 2 file sederhana untuk membuat sebuah validasi email menggunakan regex.

1. File Javascript

function validasi_email(email) {
  var re = /^(([^<>()[\]\\.,;:\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,}))$/;
  return re.test(email);
}

function validasi() {
  var $result = $("#hasil");
  var email = $("#email").val();
  $result.text("");

  if (validasi_email(email)) {
    $result.text("Selamat "+email + " merupakan email yang valid :)");
    $result.css("color", "green");
  } else {
    $result.text(email + " merupakan email tidak valid :(");
    $result.css("color", "red");
  }
  return false;
}

$("#validasi").bind("click", validasi);

2. File HTML

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

<form>
  <p>Enter an email address:</p>
  <input id='email'>
  <button type='submit' id='validasi'>Validasi!</button>
</form>

<h2 id='hasil'></h2>
Back To Top