Como te dije en mi comentario, el problema es la forma en la que usas el operador lógico |
, ya que el mismo (como lo tienes) actúa sólo sobre un grupo de búsqueda, y a ti te interesa tener 2 grupos diferenciados.
PROBLEMA
Se desea validar un campo input
de HTML, usando Javascript, de tal manera que solo permita hasta 2 decimales en cantidades numéricas. El separador para decimales es .
SOLUCIÓN
Para realizar dicha validación usaremos una expresión regular y compararemos el valor del elemento input
contra dicha expresión regular.
La dificultad solo radica en que debemos detectar cuando la cantidad lleva decimales y cuando no los lleva.
Una expresión regular puede componerse de grupos de búsqueda que se encierran entre paréntesis. Podemos establecer un grupo de búsqueda para hacer match
con números que no llevan cantidad decimal y otro grupo de búsqueda para números que si llevan valore decimal.
Una forma de realizar la validación sería la siguiente:
const btn = document.getElementById('button');
const isValid = /^(\d+)$|^(\d+\.{1}\d{2})$/;
btn.addEventListener('click', (event) => {
event.preventDefault();
let cantidad = document.getElementById('cantidad').value;
if (!isValid.test(cantidad)) {
alert('Formato no válido')
} else {
console.log('Validación superada: ', cantidad);
}
});
<div>
<label for="cantidad">Cantidad:</label><br>
<input type="text" id="cantidad" name="cantidad" placeholder="00.00"><br>
<button type="button" id="button">Validar</button>
</div>
En nuestra RegExp, tenemos los siguientes grupos:
^(\d+)$
: Indica dígitos que pueden repetirse. Se debe iniciar con dígitos (^
) y se debe finalizar con dígitos ($
).
|
: Operador lógico tipo OR
.
^(\d+\.{1}\d{2})$
: El segundo grupo de búsqueda que actúa sobre números con decimales. Indica que el patrón ha de empezar con dígitos, debe contener exactamente 1 punto y ha de terminar con exactamente 2 dígitos.
Espero que sea la validación que estabas buscando.
.
) o la coma (,
)? Pregunto porque en laRegExp
usas coma, pero en los números de ejemplo usas punto.|
. Aclara el tema de los decimales también, ¿es punto o es coma?