Cara Membuat Validasi Email dengan Sebuah Regex pada Jquery

Sebenarnya di HTML 5 sendiri sudah ada tag yang membuat sebuah valiadasi untuk Email, tetapi disini kita akan belajar cara membuat validasi email dengan sebuah regex pada jquery, jadi dimana ada kita juga bisa membuat sebuah validasi walupun type yang saya gunakan adalah input type text seperti itu, oke seperti judulnya ya saya disini membutuhkan sebuah regex ya, jadi di dalam situ kita harus memasukan pola apa saja yang hanya bisa di inputkan, oke bagaimana caranya simak terus ya teman-teman.

dengan sebuah regex kita bisa membuat yang namanya sebuah validasi, seperti yang saya tulis sebelumnya ya teman-teman, jadi di sini saya akan membuat sebuah validasi, dimana email yang hanya bisa masukan adalah ada atnya @, setelah @ hanya bisa satu titik dan teman-teman juga hanya boleh memasukan karakter underscore, seperti itu, jadi cara membuat validasi email dengan sebuah regex pada jquery, berguna sekali bagi teman-temam atau mencegah penginputan yang iseng dimana jadi kadang ada juga user yang memasukan email dengan asal-asalan dari membuat spam, lebih baik kita cegah dengan cara ini, seperti itu ya teman-teman, oke langsung saja bagaimana cara membuatnya seperti ini:

<html>
  <head>
    <title>Cara Membuat Validasi Email dengan sebuah regex pada Jquery</title>
    <style type="text/css">
      .kotak_info {width: 200px; padding: 5px; border-radius: 5px; border:1px solid #868687 ;}
      .error { color: red; }
      .submit {margin-left: 7px; border:1px solid #868687; padding: 5px; border-radius: 5px}
      .container{width: 500px; margin: auto; border:3px solid #868687; border-radius: 10px; padding: 10px; box-shadow: 9px 11px 13px 2px }
      h1{text-align: center;}
    </style>
  </head>
  <body>
  	<div class="container">
      <h1>Cara Membuat Validasi Email dengan sebuah regex pada Jquery</h1>
    <form id="signup" method="post" action="">
      	<table>
	  		<tr>
	  			<td>Masukkan Alamat Email Anda <br> dengan Benar</td>
	  			<td>: <input type="text" class="kotak_info" name="email" /></td>
	  		</tr>
	  		<tr><td></td>
	  			<td><input class="submit" type="submit" value="Submit"></td>
	  		</tr>
  		</table>
    </form>
	<span class="error"> cara memasukan email adalah dengan sebuah simbol @ dan ada titik setalah @. tidak memuat karakter selain underscore </span>

	</div>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
    </script>

	<script type="text/javascript">
      $(document).ready(function() {
        $('.error').hide();
        $('.submit').click(function(event){
          var data=$('.kotak_info').val();
          if(valid_email(data))
          {
            $('.error').hide();
          }
          else
          {
            $('.error').show();
            event.preventDefault();
          }
        });
      });
	  function valid_email(email)
      {
        var pola= new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/);
        return pola.test(email);
      }
    </script>
  </body>
</html>

Oke cukup panjang ya teman-teman, silahkan teman-teman copy ya, untuk melihat hasilnya, untuk tampilanya jika kita salah memasukan format email denan benar seperti ini ya teman-teman.

Maka akan muncul alert seperti itu, oke saya rasa cukup sampai disini belajar kita tentang cara membuat validasi email dengan sebuah regex pada jquery, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.