Cara Membuat Validasi Email Menggunakan Kode jQuery

Dalam tutorial ini kami akan mengilustrasikan Anda bagaimana melakukan validasi email dalam bentuk menggunakan jQuery.

Terkadang, pengguna memasukkan alamat email dalam format yang salah. Formulir tidak boleh mengizinkan alamat email yang salah. Sebagai gantinya, ini akan menampilkan peringatan dan memberi tahu pengguna tentang format alamat email yang salah.

Baca Juga

Dengan memasukkan kode validasi email, seseorang dapat dengan mudah membuat formulir pintar yang hanya bisa menerima format alamat email yang benar.

Kode akan berisi ekspresi reguler sederhana yang cocok dengan karakter input alamat email.

/^[\w-.+[+@[a-zA-Z0-9.-[+.[a-zA-Z[{2,4}$/

Ini akan memindai alamat email input, cocok dengan setiap karakter. Jika salah satu karakter tidak cocok dengan ekspresi di atas, pemberitahuan pemberitahuan "email tidak valid" akan muncul.

Apa yang dimaksud dengan reguler di atas?

. : Mencocokkan setiap karakter kecuali baris baru
+: Cocok dengan karakter sebelumnya atau karakter yang diulang.
$: Mencocokkan karakter di akhir baris.
. : Hanya cocok periode.
^: Cocokkan awal baris atau string.
: Melepaskan karakter khusus.
-: Indikator jangkauan. [a-z, A-Z]
-: Mengosongkan karakter khusus. (Mis. Melarikan diri - oleh -)
[0-9]: Ini cocok dengan angka digital dari 0-9.
[a-z]: Ini cocok dengan karakter dari huruf kecil ‘a’ hingga huruf kecil ‘z’.
[A-Z]: Ini cocok dengan karakter dari huruf besar ‘A’ untuk huruf kecil ‘Z’.
w: Mencocokkan karakter kata dan garis bawah. (a-z, A-Z, 0-9, _).
W: Mencocokkan karakter non-kata (%, #, @,!).
{M, N}: Menyumbangkan nilai M minimum dan maksimum.

File HTML - emailvalidation.html

<html>
<head>
<title>Email Validation</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/emailvalidation.js"></script>

<link href='css/emailvalidation.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="main">
<div class="first">
<h1>Email Validation using jQuery</h1>
<form method="post" action="#">
<label>First Name:</label>
<input type='text' name="fname" id="fname" placeholder='First Name'/>
<label>Last Name: </label>
<input type='text' name="lname" id="lname" placeholder='Last Name'/>
<label>Email Address: </label>
<input type='text' name="ename" id='txtEmail' placeholder='Valid Email Address'/>
<input type='submit' id='btnValidate' name="submit" Value='Submit' />
</form>
</div>
</div>
</body>
</html>

File jQuery - emailvalidation.js

$(document).ready(function(e) {
$('#btnValidate').click(function() {
var sEmail = $('#txtEmail').val();
// Memeriksa Fileds Kosong
if ($.trim(sEmail).length == 0 || $("#fname").val()=="" || $("#lname").val()=="") {
alert('All fields are mandatory');
e.preventDefault();
}
if (validateEmail(sEmail)) {
alert('Nice!! your Email is valid, now you can continue..');
}
else {
alert('Invalid Email Address');
e.preventDefault();
}
});
});
// Fungsi yang memvalidasi alamat email melalui ekspresi reguler.
function validateEmail(sEmail) {
var filter = /^[\w-.+[+@[a-zA-Z0-9.-[+.[a-zA-Z[{2,4}$/;

if (filter.test(sEmail)) {
return true;
}
else {
return false;
}
}

File Css - emailvalidation.css

@import "http://fonts.googleapis.com/css?family=Droid+Serif";
/* Above line is used for online google font */
h1 {
text-align:center
}
div.main {
width:960px;
height:655px;
margin:50px auto;
font-family:'Droid Serif',serif
}
div.first {
width:380px;
height:570px;
float:left;
padding:15px 60px;
background:#f8f8ff;
box-shadow:0 0 10px gray;
margin-top:20px
}
input {
width:100%;
padding:10px;
margin-top:10px;
font-size:16px;
margin-bottom:30px
}
#btnValidate {
width:100%;
padding:10px;
margin-top:10px;
background-color:#474242;
cursor:pointer;
color:#fff;
border:2px solid #adadad;
font-size:20px;
font-weight:700
}
#btnValidate:hover {
background-color:#adadad;
border:2px solid #474242
}

Kesimpulan

Saya harap tutorial ini untuk validasi email menggunakan kode jQuery sangat membantu Anda. Jika Anda memiliki metode lain, Anda dapat berbagi dengan kami di ruang komentar yang diberikan di bawah ini.

Terimakasih...

Cara Membuat Validasi Email Menggunakan Kode jQuery