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