How to do an alphanumeric validation in Javascript?

Question

How to do an alphanumeric validation in Javascript?

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

Good, I'm trying to make the user have to enter if or if at least a number or a letter, otherwise than error.

//Caracteres permitidos
var letras = "abcdefghijklmnopqrstuvwxyz";
var numeros = "0123456789";
var correcto = 0;
var correctonum = 0;

//Formulario
var password = document.createElement("form");
password.action = "";
password.method = "POST";
password.id = "formulario";
password.onsubmit = "return envio()";

//Ingreso de contraseña
var entrada = document.createElement("input");
entrada.type = "text";
entrada.name = "password";
entrada.id = "pass";
entrada.placeholder = "Ingrese su contraseña";

//boton
var boton = document.createElement("input");
boton.type = "submit";
boton.value = "Enviar";
boton.onclick = contra;

//div que contiene todo
var contenido = document.createElement("div");
contenido.id = "contenido";

//Añadir todo al HTML
document.body.appendChild(contenido);
contenido.appendChild(password);
contenido.appendChild(entrada);
contenido.appendChild(boton);

//Funcion para saber si la contraseña es correcta
function contra() {
    entrada.value.toLowerCase;
    for (var i = 0; i < entrada.value.length; i++) {
        correcto = 0;
        correctonum = 0;
        for (var j = 0; j < letras.length; j++) {
            if (letras.charAt(j) == entrada.value.charAt(i)) {
                correcto++;
            }
            if (correcto == 0) {
                alert("error,debe introducir al menos una letra");
                return false;
            }
        }
        for (var l = 0; l < numeros.length; l++) {
            if (numeros.charAt(l) == entrada.value.charAt(i)) {
                correctonum++;
            }
            if (correctonum == 0) {
                alert("error,debe introducir al menos un numero");
                return false;
            }
        }


        return true;
    }
}

function envio() {

    if (requerido(entrada)) {
        return true;
    } else {
        alert("vuelva a intentarlo");
    }

}

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">

    <title>Ejercicio 1</title>
    
</head>
<body>
    <script src="ejercicio1_ext.js"></script>
</body>
</html>

The error that I have is that the entered letter can not be a number if it is a letter or the other way around, that is why it will always throw an error.
What is the correct way to do it?

javascript html5 html web

asked by Ale 02.12.2017 в 18:30

source

2 answers

1

You could try something like this

function soloLetrasYNum(campo) {
 var validos = " abcdefghijklmnopqrstuvwxyz0123456789";
 var letra;
 var bien = true;
 for (var i=0; i<campo.value.length; i++) {
  letra=campo.value.charAt(i).toLowerCase()
  if (validos.indexOf(letra) == -1){bien=false;};
  }
  if (!bien) {
  alert("Error. Caracteres no aceptados");
 campo.focus();
}
}

answered by 02.12.2017 в 18:38

Upload MySQL PHP server image - form / data separate array laravel

score 2 · Accepted Answer

If what you want is that there is at least one character that is a digit or letter you should check if the string is correct or not once you have traced all the characters of the entry:

//Caracteres permitidos
var letras = "abcdefghijklmnopqrstuvwxyz";
var numeros = "0123456789";
var correcto = 0;
var correctonum = 0;

//Formulario
var password = document.createElement("form");
password.action = "";
password.method = "POST";
password.id = "formulario";
password.onsubmit = "return envio()";

//Ingreso de contraseña
var entrada = document.createElement("input");
entrada.type = "text";
entrada.name = "password";
entrada.id = "pass";
entrada.placeholder = "Ingrese su contraseña";

//boton
var boton = document.createElement("input");
boton.type = "submit";
boton.value = "Enviar";
boton.onclick = contra;

//div que contiene todo
var contenido = document.createElement("div");
contenido.id = "contenido";

//Añadir todo al HTML
document.body.appendChild(contenido);
contenido.appendChild(password);
contenido.appendChild(entrada);
contenido.appendChild(boton);

//Funcion para saber si la contraseña es correcta
function contra() {
    for (var i = 0; i < entrada.value.length; i++) {
        correcto = 0;
        for (var j = 0; j < letras.length; j++) {
            if (letras.charAt(j) == entrada.value.charAt(i)) {
                correcto++;
            }
        }
        for (var l = 0; l < numeros.length; l++) {
            if (numeros.charAt(l) == entrada.value.charAt(i)) {
                correcto++;
            }
        }
    }
    if (correcto == 0) {
      alert("error,debe introducir al menos un número o una letra");
      return false;
    }
    return true;
}

function envio() {

    if (requerido(entrada)) {
        return true;
    } else {
        alert("vuelva a intentarlo");
    }

}

Although this seems like a clear case to use regular expressions:

//Formulario
var password = document.createElement("form");
password.action = "";
password.method = "POST";
password.id = "formulario";
password.onsubmit = "return envio()";

//Ingreso de contraseña
var entrada = document.createElement("input");
entrada.type = "text";
entrada.name = "password";
entrada.id = "pass";
entrada.placeholder = "Ingrese su contraseña";

//boton
var boton = document.createElement("input");
boton.type = "submit";
boton.value = "Enviar";
boton.onclick = contra;

//div que contiene todo
var contenido = document.createElement("div");
contenido.id = "contenido";

//Añadir todo al HTML
document.body.appendChild(contenido);
contenido.appendChild(password);
contenido.appendChild(entrada);
contenido.appendChild(boton);

// Caracteres permitidos
var caracteres = /[a-zA-Z0-9]/;

//Funcion para saber si la contraseña es correcta
function contra() {
  var valido = caracteres.test(entrada.value);
  if (!valido){
    alert('Debe introducir al menos una letra o un número');    
  }
  return valido;
}

function envio() {

    if (requerido(entrada)) {
        return true;
    } else {
        alert("vuelva a intentarlo");
    }

}

Of course, if what you want is to only introduce characters and numbers, it would be enough to change the regular expression:

    //Formulario
    var password = document.createElement("form");
    password.action = "";
    password.method = "POST";
    password.id = "formulario";
    password.onsubmit = "return envio()";

    //Ingreso de contraseña
    var entrada = document.createElement("input");
    entrada.type = "text";
    entrada.name = "password";
    entrada.id = "pass";
    entrada.placeholder = "Ingrese su contraseña";

    //boton
    var boton = document.createElement("input");
    boton.type = "submit";
    boton.value = "Enviar";
    boton.onclick = contra;

    //div que contiene todo
    var contenido = document.createElement("div");
    contenido.id = "contenido";

    //Añadir todo al HTML
    document.body.appendChild(contenido);
    contenido.appendChild(password);
    contenido.appendChild(entrada);
    contenido.appendChild(boton);

    // Caracteres permitidos
    var caracteres = /^[a-zA-Z0-9]+$/;

    //Funcion para saber si la contraseña es correcta
    function contra() {
      var valido = caracteres.test(entrada.value);
      if (!valido){
        alert('Debe introducir únicamente letras o números');    
      }
      return valido;
    }

    function envio() {

        if (requerido(entrada)) {
            return true;
        } else {
            alert("vuelva a intentarlo");
        }

    }