Estoy creando una página que valida las entradas de los usuarios. El nombre de usuario debe estar en formato de correo electrónico y la contraseña debe tener 7 o más caracteres. Creo que tengo el código abajo, pero tengo problemas para conectar el javascript para que funcione correctamente y valide las entradas del usuario.
Aquí está el código:
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="assignment.css" /> </head> <body> <form> <h1>Sign in</h1> <label for="username"><b>Username</b></label> <input type="text" placeholder="Enter Username" name="username" required> <br><br> <label for="password"><b>Password</b></label> <input type="password" placeholder="Enter Password" name="password" required> <br><br> <button type="submit" class="signinbtn">Sign In</button> </form> function validateForm() { let regexEmail = / ^ \ w +([\.-] ? \ w +) * @ \ w +([\.-] ? \ w +) *(\.\ w { 2, 3 }) + $ /; let username = document.forms["myForm"]["username"].value; let password = document.forms["myForm"]["password"].value; if ( password.length >= 7 || username.match(regexEmail) ) { alert("Welcome"); return true; } else { alert("error, username must be in email format & password must be 7 or more characters"); return false; } </body> </html>Hay un par de problemas que puedo ver aquí, en primer lugar, su JavaScript no está dentro de las etiquetas <script></script> .
En segundo lugar, la función de validateForm de formulario que ha escrito no está adjunta a su formulario HTML. Eche un vistazo aquí para ver cómo puede ejecutar una función cuando se envía su formulario:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event
Editar: Aquí está la lista de problemas:
id , pero se refiere a myForm en su función<script>Aquí está el código fijo:
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="assignment.css" /> </head> <body> <form id="myForm"> <h1>Sign in</h1> <label for="username"><b>Username</b></label> <input type="text" placeholder="Enter Username" name="username" required /> <br /><br /> <label for="password"><b>Password</b></label> <input type="password" placeholder="Enter Password" name="password" required /> <br /><br /> <button type="submit" class="signinbtn">Sign In</button> </form> <script> function validateForm() { let regexEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; let username = document.forms["myForm"]["username"].value; let password = document.forms["myForm"]["password"].value; if (password.length >= 7 || username.match(regexEmail)) { alert("Welcome"); return true; } else { alert( "error, username must be in email format & password must be 7 or more characters" ); return false; } } const formEle = document.getElementById("myForm"); formEle.addEventListener("submit", validateForm); </script> </body> </html> Re: su comentario: tiene una función y tiene un formulario HTML. En el código original, ¿dónde se llama tu función? ¿Qué desencadena la ejecución de la validación en los campos del formulario? En el código que proporcioné, adjunté su función al evento de submit del formulario, de modo que cuando se envía el formulario, se llama a su función. Hay otras formas en que esto podría manejarse: agregar un controlador de click en el botón, agregar un controlador de change a los campos del formulario, etc., etc.
le faltan un montón de etiquetas de script y el JS debe refactorizarse con algunos cambios menores.
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="assignment.css" /> </head> <body> <form> <h1>Sign in</h1> <label for="username"><b>Username</b></label> <input type="text" placeholder="Enter Username" name="username" id="username" required /> <br /><br /> <label for="password"><b>Password</b></label> <input type="password" placeholder="Enter Password" name="password" id="password" required /> <br /><br /> <button type="submit" id="btn" class="signinbtn">Sign In</button> </form> <script type="text/javascript"> let regexEmail = / ^ \ w +([\.-] ? \ w +) * @ \ w +([\.-] ? \ w +) *(\.\ w { 2, 3 }) + $ /; let username = document.getElementById("username").value; let password = document.getElementById("password").value; document.getElementById("btn").addEventListener("click", (e) => { e.preventDefault(); if (password.length >= 7 || username.match(regexEmail)) { alert("Welcome"); } else { alert( "error, username must be in email format & password must be 7 or more characters" ); } }); </script> </body> </html>