Validación de números en JavaScript

A veces, los datos ingresados ​​en un campo de texto deben tener el formato correcto y deben ser de un tipo particular para poder usar el formulario de manera efectiva. Por ejemplo, el número de teléfono, el número de lista, etc. son algunos detalles que deben estar en dígitos, no en letras.

Acercarse:

Hemos utilizado la función isNaN() para la validación del campo de texto solo para valores numéricos. Los datos del campo de texto se pasan en la función y si los datos pasados ​​son números, entonces isNan() devuelve verdadero y si los datos no son números o una combinación de números y alfabetos, devuelve falso.

A continuación se muestra un código en HTML y JavaScript para validar un campo de texto si contiene dígitos o no.

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <script>
            /* this function is called when we
            click on the submit button*/
            function numberValidation() {
                /*get the value of the textfield using a 
                combination of name and id*/
                //form is the name of the form coded below
                //numbers are the name of the inputfield
                /*value is used to fetch the value written 
                in that particular field*/
                var n = document.form.numbers.value;
  
/* isNan() function check whether passed variable 
   is number or not*/
                if (isNaN(n)) {
/*numberText is the ID of span that print "Please enter 
Numeric value" if the value of inputfield is not a number*/
                    document.getElementById(
                      "numberText").innerHTML =
                      "Please enter Numeric value";
                    return false;
                } else {
                    /*numberText is the ID of span that print 
      "Numeric value" if the value of inputfield is a number*/
                    document.getElementById(
                      "numberText").innerHTML = 
                      "Numeric value is: " + n;
                    return true;
                }
            }
        </script>
    </head>
  
    <body>
        <!-- GeeksforGeeks image logo-->
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png" 
             alt="Avatar" 
             style="width: 200px;" />
  
        <!-- making the form with form tag than
             conatins inputField and a button -->
        <!-- onsubmit calls the numberValidation
             function which is created above -->
        <form name="form"
              onsubmit="return numberValidation()">
            <!-- name of input type is numbers 
       and create of id of span as numberText-->
            <!-- Respective output of input 
         is printed in span field -->
            Number: <input type="text"
                           name="numbers" />
          <span id="numberText"></span>
          <br />
            <input type="submit"
                   value="submit" />
        </form>
    </body>
</html>

Salida:
Caso 1: el campo de texto contiene alfabetos

Caso 2: el campo de texto contiene letras y dígitos

Caso 3: el campo de texto contiene solo dígitos

Publicación traducida automáticamente

Artículo escrito por master_abhig y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *