Scribd
Upload
7 views3 pages

Atividade Desenvolvimento JavaScript

Uploaded by

borutinhoreact
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views3 pages

Atividade Desenvolvimento JavaScript

Uploaded by

borutinhoreact
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>

<html lang="pt-BR">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Validação de E-mail</title>

<style>

body {

font-family: Arial, sans-serif;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

background-color: #f4f4f9;

.container {

padding: 20px;

border: 1px solid #ccc;

border-radius: 8px;

background-color: #fff;

box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

.error-message {

color: red;

font-size: 14px;

margin-top: 5px;
}

</style>

</head>

<body>

<div class="container">

<h2>Validação de E-mail</h2>

<form id="emailForm">

<label for="email">Digite seu e-mail:</label>

<input type="text" id="email" name="email">

<button type="submit">Enviar</button>

<p id="error-message" class="error-message"></p>

</form>

</div>

<script>

document.getElementById('emailForm').addEventListener('submit', function
(event) {

event.preventDefault(); // Previne o envio do formulário

const emailInput = document.getElementById('email');

const errorMessage = document.getElementById('error-message');

const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

if (!emailPattern.test(emailInput.value)) {

errorMessage.textContent = 'Por favor, insira um e-mail válido. Ex:


[email protected]';

} else {

errorMessage.textContent = '';
alert('E-mail válido!');

});

</script>

</body>

</html>

You might also like