Validasi Email Javascript Menggunakan Ekspresi Reguler (regex)

Programming

Oleh Vinci terakhir diubah pada 1 September 2022.

Tutorial ini akan membantu Anda mempelajari cara memvalidasi email menggunakan ekspresi reguler (regex) dalam JavaScript. Ini memiliki lebih dari satu contoh bagaimana melakukan validasi email.

Contoh-contoh ini berbeda dalam pola regex yang digunakan dan dalam penanganan email masuk.

Contoh cepat berikut menggunakan pola regex dengan JavaScript cocok() Fungsi validasi email mengubah email masuk menjadi huruf kecil sebelum menemukan kecocokan.

Contoh cepat

const validateEmail = (email) => {
	return String(email)
		.toLowerCase()
		.match(
			/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-z\-0-9]+\.)+[a-z]{2,}))$/
		);
};

Hasil tes

Mengembalikan null saat menerima format email yang tidak valid. Jika tidak, ia mengembalikan array konten yang cocok dengan regex.

Input: vincy#example
Output: null.

Input: vincy@example.com
Output: vincy@example.co,vincy,vincy,,,example.co,,example.co,example.

Validasi email sederhana dalam JavaScript menggunakan regex

Skrip validasi email sederhana ini melakukan pemeriksaan dasar dengan string email yang masuk.

Memvalidasi email masuk jika memiliki format yang diharapkan, terlepas dari panjang dan tipe datanya.

Saya menambahkan contoh ini hanya untuk memahami bagaimana melakukan validasi berbasis pola dengan regex di javascript.

Saya lebih suka menggunakan contoh cepat dan contoh validasi terperinci berikut.

validasi-sederhana.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Simple Email Validation using Regular
    Expression (regex)</title>
<link rel="stylesheet" href="https://phppot.com/javascript/javascript-validate-email-regex/style.css" type="text/css" />
<link rel="stylesheet" href="form.css" type="text/css" />
</head>
<body>
    <div class="phppot-container">
        <h1>JavaScript Simple Email Validation using Regular
            Expression (regex)</h1>
        <div class="tile-container">
            <form name="form">
                <div class="row">
                    <label for="email">Email address: </label> <input
                        id="email" name="email" />
                </div>
                <div class="row">
                    <input type="submit" name="submit" value="Submit"
                        onclick="validateEmail(document.form.email)" />
                </div>
            </form>
        </div>
    </div>
    <script>
		function matchEmailRegex(emailStr) {
            var emailRegex = /\S+@\S+\.\S+/;
            return emailStr.match(emailRegex);
        };
        
        // validates in the form anystring@anystring.anystring
        // no more fancy validations
        function validateEmail(emailField) {
            var emailStr = emailField.value;
            if (matchEmailRegex(emailStr)) {
                alert("Entered value is a valid email.");
            } else {
                alert("Entered value is not an email.");
            }
            return false;
        }
	</script>
</body>
</html>

Hasil tes

Input: vincy
Output: Entered value is not an email. 

Input: vincy@example.c
Output: Entered value is a valid email.

Bagaimana melakukan validasi email yang ketat dalam JavaScript

Contoh ini menggunakan pola regex yang hampir identik yang digunakan dalam contoh cepat. Namun, nilai kembalian mengontrol kecocokan JavaScript untuk output pesan validasi.

Memberikan kode untuk dimasukkan langsung dalam skrip validasi aplikasi untuk memvalidasi input email formulir.

alert() dapat diganti dengan formulir apa pun untuk memberi tahu pengguna akhir tentang status validasi.

validasi-ketat.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Validate Email using Regular Expression
    (regex)</title>
<link rel="stylesheet" href="https://phppot.com/javascript/javascript-validate-email-regex/style.css" type="text/css" />
<link rel="stylesheet" href="form.css" type="text/css" />
</head>
<body>
    <div class="phppot-container">
        <h1>JavaScript Validate Email using Regular Expression
            (regex)</h1>
        <div class="tile-container">
            <form name="form">
                <div class="row">
                    <label for="email">Email address: </label> <input
                        id="email" name="email" />
                </div>
                <div class="row">
                    <input type="submit" name="submit" value="Submit"
                        onclick="validateEmail(document.form.email)" />
                </div>
            </form>
        </div>
    </div>
    <script>
		function matchEmailRegex(emailStr) {
			var emailRegex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\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,}))$/;
			return emailStr.match(emailRegex);
		};

		function validateEmail(emailField) {
			var emailStr = emailField.value;
			if (matchEmailRegex(emailStr)) {
				alert("Entered value is a valid email.");
			} else {
				alert("Entered value is not an email.");
			}
			return false;
		}
	</script>
</body>
</html>

Hasil tes

Tidak seperti contoh sederhana, ini sangat memvalidasi awalan email dengan karakter khusus yang diizinkan.

Itu juga memeriksa format nama domain untuk memvalidasi email. Hasil berikut menunjukkan kasus uji dan keluaran yang terkait dengan validasi email JavaScript.

Input: vincy
Output: Entered value is not an email. 

Input: vincy@example.c
Output: Entered value is not an email.

Input: vincy@example.com
Output: Entered value is a valid email.

Unduh

Kembali ke atas


Source link

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.