Bagaimana Cara Melakukan Validasi Email di JavaScript?

JavaScript adalah salah satu bahasa paling populer di Full-Stack , Front-end, dan Back-end Development. Ini digunakan untuk membuat situs web yang dirancang dengan indah. Dalam JavaScript, validasi digunakan untuk mengotentikasi pengguna. Artikel ini memberikan panduan langkah demi langkah tentang Validasi email di JavaScript dalam urutan berikut:

Apa itu Validasi?
Validasi Email di JavaScript – Langkah demi Langkah

Apa itu Validasi?

Validasi adalah metode untuk mengotentikasi pengguna. JavaScript menyediakan fasilitas untuk memvalidasi form di sisi klien sehingga pemrosesan data akan lebih cepat daripada validasi sisi server. Ini disukai oleh sebagian besar pengembang web. Melalui JavaScript, kami dapat memvalidasi nama, kata sandi, email, tanggal, nomor ponsel, dan lebih banyak bidang.

Validasi sisi klien mencegah klien mengetahui apakah formulir baik-baik saja sebelum memuat ulang halaman. Padahal, validasi sisi server penting karena fakta bahwa validasi sisi klien dapat sepenuhnya dilewati dengan menonaktifkan JavaScript.

Sekarang mari kita lanjutkan dan lihat langkah-langkah yang terlibat dalam validasi email di JavaScript.

Validasi Email di JavaScript – Langkah demi Langkah

Memvalidasi email adalah poin yang sangat penting saat memvalidasi formulir HTML . Email adalah string atau subset dari karakter ASCII yang dipisahkan menjadi dua bagian oleh simbol “ @ ”.

Bagian pertama dapat terdiri dari Karakter ASCII berikut :

Huruf besar (AZ) dan huruf kecil (az)
Digit (0-9)
Karakter seperti! # $% & ‘* + – / =? ^ _ `{| } ~
Karakter. (titik, titik, atau titik penuh) tetapi tidak boleh menjadi karakter pertama atau terakhir dan tidak boleh muncul satu per satu

Nama domain terdiri dari

surat
digit
tanda hubung
titik

Untuk mendapatkan id email yang valid kita menggunakan ekspresi reguler /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/. Sekarang mari kita lihat bagaimana ekspresi ini digunakan dalam Kode JavaScript untuk memvalidasi id email Anda:

email-validation.js

function ValidateEmail(inputText)
{
var mailformat = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;
if(inputText.value.match(mailformat))
{
alert("You have entered a valid email address!");    //The pop up alert for a valid email address
document.form1.text1.focus();
return true;
}
else
{
alert("You have entered an invalid email address!");    //The pop up alert for an invalid email address
document.form1.text1.focus();
return false;
}
}

Sekarang mari kita terapkan fungsi JavaScript dalam bentuk HTML:

emailvalidation.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript email validation</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />   //link to the source file of css to add styles
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Enter email to Validate</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li>
<li> </li>
<li class="Validate"><input type="submit" name="Validate" value="Validate" onclick="ValidateEmail(document.form1.text1)"/></li>  //Adding the submit button
<li> </li>
</ul>
</form>
</div>
<script src="email-validation.js"></script>    //link to the source file of javascript function
</body>
</html>

Sekarang mari tambahkan gaya ke formulir dengan bantuan CSS :

form-style.css

li {list-style-type: none;
font-size: 16pt;
}
.mail {
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
width: 800px;
background : rgb(153, 198, 211);
border: 1px soild rgb(1, 20, 24);
}
.mail h2 {
margin-left: 38px;
}
input {
font-size: 20pt;
}
input:focus, textarea:focus{
background-color: lightyellow;
}
input submit {
font-size: 10pt;
}

Sekarang Anda telah membuat formulir untuk memvalidasi id email , Anda akan mendapatkan keluaran berikut setelah menjalankan kode HTML :

Keluaran

Sekarang berdasarkan format ekspresi reguler, jika Anda memasukkan id email yang valid seperti xyz@domain.com maka akan muncul peringatan berikut:

Tetapi jika Anda memasukkan id email yang melanggar aturan format ekspresi reguler Anda seperti xyz # domain-co, itu akan menampilkan peringatan berikut:

Ini adalah langkah berbeda untuk validasi email di JavaScript. Saya harap Anda memahami bagaimana HTML, CSS, dan JavaScript digunakan bersama untuk membuat formulir validasi.

Leave a Comment Cancel reply