Berikut ini adalah contoh penggunaan JavaScript Regular Expressions dalam dan penerapannya dalam HTML.
1. Mengecek Format Email
const email = "contoh@domain.com";
const regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (regex.test(email)) {
console.log("Format email valid");
} else {
console.log("Format email tidak valid");
}2. Mengecek Format Nomor Telepon
const phoneNumber = "081234567890";
const regex = /^(^\+62\s?|^0)(\d{3,4}-?){2}\d{3,4}$/;
if (regex.test(phoneNumber)) {
console.log("Format nomor telepon valid");
} else {
console.log("Format nomor telepon tidak valid");
}Penerapan dalam HTML
<!DOCTYPE html>
<html>
<head>
<title>Penerapan Ekspresi Reguler</title>
<script>
function validateEmail() {
const emailInput = document.getElementById("email").value;
const regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (regex.test(emailInput)) {
document.getElementById("emailResult").innerHTML = "Format email valid";
} else {
document.getElementById("emailResult").innerHTML = "Format email tidak valid";
}
}
function validatePhoneNumber() {
const phoneNumberInput = document.getElementById("phoneNumber").value;
const regex = /^(^\+62\s?|^0)(\d{3,4}-?){2}\d{3,4}$/;
if (regex.test(phoneNumberInput)) {
document.getElementById("phoneNumberResult").innerHTML = "Format nomor telepon valid";
} else {
document.getElementById("phoneNumberResult").innerHTML = "Format nomor telepon tidak valid";
}
}
</script>
</head>
<body>
<h1>Penerapan Ekspresi Reguler dalam HTML</h1>
<label for="email">Email:</label>
<input type="text" id="email" name="email" required>
<button onclick="validateEmail()">Cek Format Email</button>
<p id="emailResult"></p>
<label for="phoneNumber">Nomor Telepon:</label>
<input type="text" id="phoneNumber" name="phoneNumber" required>
<button onclick="validatePhoneNumber()">Cek Format Nomor Telepon</button>
<p id="phoneNumberResult"></p>
</body>
</html>Output:
See the Pen JavaScript Regular Expressions by WebbizID (@De-Orchids) on CodePen.
Dalam contoh di atas, kita menggunakan JavaScript Regular Expressions untuk memvalidasi format email dan nomor telepon. Kode JavaScript digunakan untuk memeriksa apakah input pengguna sesuai dengan pola yang ditentukan oleh ekspresi reguler. Jika sesuai, pesan “Format valid” akan ditampilkan, jika tidak, pesan “Format tidak valid” akan ditampilkan.
Dalam penerapan HTML, kita menggunakan JavaScript untuk mengambil nilai input dari elemen input dan memeriksa validitasnya menggunakan ekspresi reguler. Hasil validasi akan ditampilkan dalam elemen paragraf dengan id yang sesuai.
Dengan menggunakan ekspresi reguler, kita dapat dengan mudah memvalidasi format email, nomor telepon, atau pola lainnya dalam JavaScript dan menerapkannya dalam HTML.
Leave a Reply