Validasi Email Menggunakan Regex Pada Javascript

Posted on by fauhan.pugar

Contoh regular expresion yang diterima unicode:



1
<span class="kwd">var</span><span class="pln"> re </span><span class="pun">=</span> <span class="str">/^(([^&lt;&gt;()\[\]\.,;:\s@"]+(\.[^&lt;&gt;()\[\]\.,;:\s@"]+)*)|(".+"))@(([^&lt;&gt;()[\]\.,;:\s@"]+\.)+[^&lt;&gt;()[\]\.,;:\s@"]{2,})$/</span><span class="pln">i</span><span class="pun">;</span>

Perlu diingat kalau kita jangan terlalu bergantung pada validasi di Javascript karena dapat dengan mudah di nonaktifkan. Oleh karena itu, diperlukan juga validasi pada server side juga untuk mengatasi kelemahan ini.

Dari contoh diatas, berikut ini adalah penggunaannya:



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<span class="kwd">function</span><span class="pln"> validasiEmail</span><span class="pun">(</span><span class="pln">email</span><span class="pun">)</span> <span class="pun">{</span>

  <span class="kwd">var</span><span class="pln"> emailRegex </span><span class="pun">=</span> <span class="str">/^(([^&lt;&gt;()[\]\\.,;:\s@"]+(\.[^&lt;&gt;()[\]\\.,;:\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,}))$/</span><span class="pun">;</span>

  <span class="kwd">return</span><span class="pln"> emailRegex</span><span class="pun">.</span><span class="pln">test</span><span class="pun">(</span><span class="pln">String(email).toLowerCase()</span><span class="pun">);</span>

<span class="pun">}</span>



<span class="kwd">function</span><span class="pln"> validasi</span><span class="pun">()</span> <span class="pun">{</span>

  <span class="kwd">var</span><span class="pln"> $hasil</span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">"#hasil"</span><span class="pun">);</span>

  <span class="kwd">var</span><span class="pln"> email </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">"#hasil"</span><span class="pun">).</span><span class="pln">val</span><span class="pun">();</span><span class="pln">

  $hasil</span><span class="pun">.</span><span class="pln">text</span><span class="pun">(</span><span class="str">""</span><span class="pun">);</span>



  <span class="kwd">if</span> <span class="pun">(</span><span class="pln">validasiEmail</span><span class="pun">(</span><span class="pln">email</span><span class="pun">))</span> <span class="pun">{</span><span class="pln">

    $hasil</span><span class="pun">.</span><span class="pln">text</span><span class="pun">(</span><span class="pln">email </span><span class="pun">+</span> <span class="str">" is valid :)"</span><span class="pun">);</span><span class="pln">

    $hasil</span><span class="pun">.</span><span class="pln">css</span><span class="pun">(</span><span class="str">"color"</span><span class="pun">,</span> <span class="str">"green"</span><span class="pun">);</span>

  <span class="pun">}</span> <span class="kwd">else</span> <span class="pun">{</span><span class="pln">

    $hasil</span><span class="pun">.</span><span class="pln">text</span><span class="pun">(</span><span class="pln">email </span><span class="pun">+</span> <span class="str">" is not valid :("</span><span class="pun">);</span><span class="pln">

    $hasil</span><span class="pun">.</span><span class="pln">css</span><span class="pun">(</span><span class="str">"color"</span><span class="pun">,</span> <span class="str">"red"</span><span class="pun">);</span>

  <span class="pun">}</span>

  <span class="kwd">return</span> <span class="kwd">false</span><span class="pun">;</span>

<span class="pun">}</span><span class="pln">



$</span><span class="pun">(</span><span class="str">"#validate"</span><span class="pun">).</span><span class="pln">bind</span><span class="pun">(</span><span class="str">"click"</span><span class="pun">,</span><span class="pln"> validasi</span><span class="pun">);</span>

Saya menggunakan script sederhana untuk mem-validasi email. Nah, kalian bisa mempelajari dari script dibawah ini.



1
2
3
4
5
6
7
8
9
<span class="tag">&lt;script</span> <span class="atn">src</span><span class="pun">=</span><span class="atv">"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"</span><span class="tag">&gt;&lt;/script&gt;</span>



<span class="tag">&lt;form&gt;</span>

  <span class="tag">&lt;p&gt;</span><span class="pln">Masukkan alamat email:</span><span class="tag">&lt;/p&gt;</span>

  <span class="tag">&lt;input</span> <span class="atn">id</span><span class="pun">=</span><span class="atv">'email'</span><span class="tag">&gt;</span>

  <span class="tag">&lt;button</span> <span class="atn">type</span><span class="pun">=</span><span class="atv">'submit'</span> <span class="atn">id</span><span class="pun">=</span><span class="atv">'validate'</span><span class="tag">&gt;</span><span class="pln">Validate!</span><span class="tag">&lt;/button&gt;</span>

<span class="tag">&lt;/form&gt;</span>



<span class="tag">&lt;h2</span> <span class="atn">id</span><span class="pun">=</span><span class="atv">'hasil'</span><span class="tag">&gt;&lt;/h2&gt;</span>