1

Únicamente necesito que el input obligue al usuario a ingresar un dato con letras y numeros.

<label style="width: 20%;" for="fAlias">Alias </label>
<input style="width: 30%;" minlength="5" type="text" id="fAlias" name="fAlias">

3 respuestas 3

2

Solo testea el valor del input con la siguiente expresión regular "^[a-zA-Z0-9]*$" , aquí está un código que puede servirte:

<script type="text/javascript">

        
const validarAlfanumerico = (input) => {

    let inputfAlias = input; //recibimos el input
    let fAlias = input.value; // extraemos el value
    let fAliasRegex = /^[a-zA-Z0-9]*$/; // esta expresion "matchea" alfanuméricos exclusive
    let aliasResult = fAliasRegex.test(fAlias); // Se ejecuta el test para saber si es válido el value del input

    console.log(aliasResult == true ? "Alfanumerico" : "No alfanumerico" );
    /*
        Si el aliasResult es true entonces el valor introducido por el usuario es válido.
        Si el aliasResult es false entonces el valor introducido por el usuario No es "alfanumerico". (y tiene caracteres extras).
    */
}
   
</script>

Para usar la función puedes dispararla dsde el propio input usando el atributo "onchange" así:

<input style="width: 30%;" minlength="5" type="text" id="fAlias" name="fAlias" onchange="validarAlfanumerico(this)">
1
  • Si lo que quieres es que forzosamente se agreguen numeros y letras a la vez, puedes usar esta expresión en lugar de la que está en el código: /^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$/ con esta expresión se requiere mínimo una letra y un número para pasar el "test". Commented el 5 abr. 2023 a las 7:21
1

Necesitas hacer una validación con JavaScript , debes verificar si la cadena contiene por lo menos un carácter dentro del código ascii, por ejemplo, podrías validar si el carácter esta dentro del rango de 65 a 90 esto te evitara hacer tantas validaciones y solo con validar si un carácter de tu texto esta dentro de ese rango, entonces sabras que el texto tiene un carácter de la A-Z (mayusculas) Esto es el rango de ascii

A-Z (65-90) a-Z( 97-122) 0-9 (48-57)

Con esta explicación aqui esta el codigo

while (true) {
  let user_input = prompt("Ingresa tu password:");
  let is_valid = false;

  // Verificación ascii
  for (let i = 0; i < user_input.length; i++) {
    let char_code = user_input.charCodeAt(i);
    if (
      (char_code >= 48 && char_code <= 57) || // números
      (char_code >= 65 && char_code <= 90) || // letras mayúsculas
      (char_code >= 97 && char_code <= 122)   // letras minúsculas
    ) {
      is_valid = true;
    } else {
      is_valid = false;
      break;
    }
  }

  // Si el input es válido, salir del loop
  if (is_valid) {
    break;
  } else {
    console.log("No contiene letra o numero.");
  }
}

console.log("Es valido:", user_input);

También podrías hacerlo de esta forma pero creo es mas tardado y podría afectar tu performance.

 for (let i = 0; i < user_input.length; i++) {
    let char = user_input[i];
    if (char.match(/[a-zA-Z]/)) {
      has_letter = true;
    } else if (char.match(/[0-9]/)) {
      has_number = true;
    }
  }

Y algo así quedaría tu script completo

<input style="width: 30%;" minlength="5" type="text" id="fAlias" name="fAlias" oninput="validateInput(this)">
<span id="error-msg" style="color: red; display: none;">Debe contener al menos un numero y una letra.</span>

<script>
function validateInput(inputField) {
  let user_input = inputField.value;
  let has_letter = false;
  let has_number = false;

  for (let i = 0; i < user_input.length; i++) {
    let char_code = user_input.charCodeAt(i);
    if (
      (char_code >= 48 && char_code <= 57) || // números
      (char_code >= 65 && char_code <= 90) || // letras mayúsculas
      (char_code >= 97 && char_code <= 122)   // letras minúsculas
    ) {
      if (char_code >= 48 && char_code <= 57) {
        has_number = true;
      } else {
        has_letter = true;
      }
    }
  }

  if (has_letter && has_number) {
    document.getElementById("error-msg").style.display = "none";
  } else {
    document.getElementById("error-msg").style.display = "block";
  }
}
</script>

Exito.

1

Asumiendo que tu <input> se encuentra envuelto en un formulario, una opción sería emplear el atributo de HTML pattern.

Basándome en esta entrada obtuve este patrón [a-zA-Z0-9]+ que aplicado a un bloque de código de ejemplo, quedaría de esta forma:

<form>
<input type="text" pattern="[a-zA-Z0-9]+">
<input type="submit" value="Enviar">
</form>

Tal vez, lo que deseas es realizar la evaluación a tiempo real mientras el usuario escribe, en cuyo caso esta opción puede no serte de utilidad, pues se evalúa cuando intentas enviar los datos del formulario.


Para el otro caso, necesitas JavaScript. Básicamente algo como esto:

document.querySelector('#my-input').addEventListener('keydown', (e) =>
{
    if (! e.key.match(/[a-zA-Z0-9]/))
    {
        e.preventDefault();
    }
});
<input type="text" id="my-input">

Esta solución la construí a partir de la información encontrada en esta otra entrada.

Consiste en adjuntar el evento keydown al input, en dicho evento realizar una validación empleando expresiones regulares al caracter pulsado para comprobar si se trata de una letra o un número y cancelar el evento si falla dicha validación.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.