Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Validar textbox con expresiones regulares

JavaScript - Validar textbox con expresiones regulares

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Validar textbox con expresiones regulares

Publicado por Robokick (10 intervenciones) el 30/07/2021 03:29:21
Hola con todos amigos

Por favor alguien me podría enseñar como validar que en un textbox solo me permite ingresar por ejemplo el nombre o apellido de una persona es decir solo letras si por ahí en el textbox ingreso robokick123 automáticamente debería mostrarme un aviso que el nombre está incorrecto que solo debe de ingresar letras

Esto quiero hacerlo con expresiones regulares usando javascript ya lo hice con Php pero me parece que también debo hacerlo con javascript

Muchas gracias espero puedan ayudarme
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil
Val: 13
Ha aumentado su posición en 177 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Validar textbox con expresiones regulares

Publicado por Davit (19 intervenciones) el 30/07/2021 14:43:03
Mira a ver si esto te vale:


1
2
3
4
5
6
7
8
9
10
11
12
<script>
        function validar(regexp){
            if(/[^a-zA-Z]/g.test(regexp)){
                document.getElementById("aviso").innerHTML = "Introduce solo letras";
            }
        };
</script>
</head>
<body>
    <input type="text" onchange="validar(this.value)" >
    <p id="aviso" style="color:red"></p>
</body>


Un saludo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Validar textbox con expresiones regulares

Publicado por Robokick (10 intervenciones) el 01/08/2021 19:39:15
Hola Davit,

si lo que me envias si funciona y hace lo que quiero pero te mando una pantalla para que veas como aparece y si tal vez se pueda mejorar la forma en la que el usuario vera el mensaje

no se talvez que el mensaje salga al costadito de la caja de texto puse la p al costado del codigo html pero asi me muestra el mensaje
no se habria alguna manera de mejorar la visualizacion del mensaje??

Gracias y saludos
valida_nombre
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 13
Ha aumentado su posición en 177 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Validar textbox con expresiones regulares

Publicado por Davit (19 intervenciones) el 01/08/2021 22:45:49
Sí, eso es porque los párrafos "<p>" por defecto comienzan en una nueva línea, para eso tendrías que darle una clase al párrafo que se crea y cambiarle el display con CSS valdría. Por defecto viene como "block" y lo he cambiado a "inline"
algo así, aunque aquí he usado el "id" que le daba antes.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<title>Document</title>
    <style>
        #aviso{
            color:red;
            display: inline;
        }
    </style>
    <script>
        function validar(regexp){
            if(/[^a-zA-Z]/g.test(regexp)){
                document.getElementById("aviso").innerHTML = "Introduzca solo letras";
            }
        };
    </script>
</head>
<body>
    <input type="text" onchange="validar(this.value)" >
    <p id="aviso"></p>
</body>

Un saludo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Validar textbox con expresiones regulares

Publicado por Robokick (10 intervenciones) el 01/08/2021 23:30:35
Si si le puse estilos y como que ya se ve mejor
algo mas sabes como hacer para que cuando por ejemplo al textbox del campo nombre si empiezo poniendo el arroba en lugar de una letra
que el textbox se ponga de rojo en los bordes y que aparezca una x a la derecha del textbox y si esta correcto el nombre un check verde que aparezca

eh visto algunos ejemplos pero no me funciona
sabras como hacer eso por favor

Gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 13
Ha aumentado su posición en 177 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Validar textbox con expresiones regulares

Publicado por Davit (19 intervenciones) el 02/08/2021 18:04:23
Para lo del @ y para detectar si es correo o no, utilizas otra expresión regular y el código quedaría así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<style>
 
        .formulario__campo{
            display: flex;
            margin-top: 15px;
            column-gap: 20px;
        }
 
        .rojo{
            color: red;
        }
 
        .border-rojo{
            border: 2px solid red;
        }
 
    </style>
    <script>
        function validar(regexp){
            if(/[^a-zA-Z]/g.test(regexp)){
                document.getElementById("aviso").innerHTML = "Introduzca solo letras";
                document.getElementById("campo_texto").className = "border-rojo";
            }else{
                document.getElementById("aviso").innerHTML = "";
                document.getElementById("campo_texto").classList.remove("border-rojo");
            }
        };
 
        function validarMail(regexp){
            if(!/^[^@]+@[^@]+\.[a-zA-Z]{2,}$/.test(regexp)){
                document.getElementById("avisoMail").innerHTML = "No correspone con el formato mail";
                document.getElementById("campo_mail").className = "border-rojo";
            }else{
                document.getElementById("avisoMail").innerHTML = "";
                document.getElementById("campo_mail").classList.remove("border-rojo");
            }
        };
    </script>
</head>
<body>
    <form class="formulario">
        <div class="formulario__campo">
            <input id="campo_texto" type="text" onchange="validar(this.value)" >
            <p id="aviso" class="rojo"></p>
        </div>
        <div class="formulario__campo">
            <input id="campo_mail" type="email" onchange="validarMail(this.value)" >
            <p id="avisoMail" class="rojo"></p>
        </div>
    </form>
</body>

Para lo de el "✔" o la "x" lo puedes hacer de varias formas, o sustituyendo los textos que aparecen por caracteres, o usando iconos tipo fontawesome (https://fontawesome.com/)y para los colores les das estilos con css.
De todas formas, yo te he puesto una forma de hacerlo con Javascript y seguramente no sea la más eficiente.

Un saludo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Validar textbox con expresiones regulares

Publicado por Robokick (10 intervenciones) el 02/08/2021 18:15:52
Muchas gracias Davit por tu ayuda
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Validar textbox con expresiones regulares

Publicado por Robokick (10 intervenciones) el 04/08/2021 00:43:20
Davit que tal
Sabes después que hice als expresiones regulares me di con la sorpresa que no me acepta los espacios en blanco
Cuando pongo al textbox dos nombres obviamente va separado por un espacio y eso no me reconoce el programa el mensaje que obtengo es el que me dijiste que ponga Introduzca solo letras

Por favor sabes como hacer para que me acepte los espacios en blanco creo que solo me falta eso para acabar con el formulario

Muchas gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Alejandro
Val: 1.448
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Validar textbox con expresiones regulares

Publicado por Alejandro (532 intervenciones) el 04/08/2021 03:14:45
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
Solo añádelo
1
2
3
4
<form>
	<input type="text" name="nombre" pattern="[a-zA-z ]{*}" />
	<button>Enviar</button>
</form>

1
2
if(/[^a-zA-Z ]/g.test(regexp)){
if(/[^a-zA-Z\b]/g.test(regexp)){
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

Validar textbox con expresiones regulares

Publicado por Robokick (10 intervenciones) el 04/08/2021 03:30:14
Hola Alejandro buenas noches
Pero el pattern yo no quisiera usarlo porque quiero validar todo por javascript para asegurar mejor mi fomulario
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Alejandro
Val: 1.448
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Validar textbox con expresiones regulares

Publicado por Alejandro (532 intervenciones) el 30/07/2021 17:19:47
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
1
2
3
4
<form>
	<input type="text" name="nombre" pattern="[a-zA-z]" />
	<button>Enviar</button>
</form>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar