Hola este es mi codigo, me cuesta mucho entender los patrones pero ayudandome de los demas se pide lo que quiere, gracias.
<!DOCTYPE html>
<html>
<head>
<title>validacion Regex</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
*{margin: 0; padding: 0;}
form{width: 500px;}
label, input, button {
display: block; padding: 5px; width: 100%; margin: 5px auto;}
span{display: none; color: red; background-color: lightyellow;}
</style>
<script type="text/javascript">
function validar(){
var patronNombre = new RegExp("[a-zA-Z]{3,}");
var patronCorreo = /\w+@{1}\w+\.{1}\w+/
var nodosInput = document.getElementsByTagName("input");
var enviar = true;
var msg = document.getElementsByTagName("span");
var nombre = nodosInput[0].value;
if (!patronNombre.test(nombre)) {
msg[0].textContent = "El nombre no cumple con tener al menos 3 letras";
msg[0].style.display = "block";
enviar = false;
}
else {
msg[0].style.display = "none";
}
var patronAT = /\sat\s/g;
nodosInput[2].value = nodosInput[2].value.replace(patronAT, '@');
if (!patronCorreo.test(nodosInput[2].value)) {
msg[2].textContent = "El formato de correo es incorrecto falta @ ó .";
msg[2].style.display = "block";
enviar = false;
}
else {
msg[2].style.display = "none";
}
nodosInput[2].value = nodosInput[2].value.toLowerCase();
return enviar;
}
</script>
<body>
</head>
<div>
<form method="GET" action="#" name="miformulario" onsubmit="return validar()" >
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" id="nombre" placeholder="Introducir Nombre" />
<span class="msg"></span>
<label for="apellidos">Apellidos:</label>
<input type="text" name="apellidos" id="apellidos" placeholder="Introducir Apellidos" />
<span class="msg"></span>
<label for="correo">Correo Electrónico:</label>
<input type="text" name="email" id="correo" placeholder="Introducir Correo Electrónico" />
<span class="msg"></span>
<button name="enviar" value="enviar" type="submit">Enviar</button>
</form>
</div>
</body>
</html>