Dado un documento HTML que contiene un elemento de entrada de cuadro de texto , la tarea es permitir la entrada de estrictamente 10 dígitos numéricos o números en ese cuadro de texto en particular usando jQuery . Hay dos enfoques que se pueden tomar para lograr esta tarea:
Enfoque 1: usar el atributo de patrón en HTML. Defina la siguiente expresión regular para el atributo de patrón :
Expresión regular:
\d{10}
Explicación: \ d coincide con un dígito o un solo carácter en el rango entre 0 y 9 (ambos inclusive) y {10} coincide con el mismo token exactamente diez veces.
En este enfoque, si la entrada en el cuadro de texto no coincide con la expresión regular en el atributo de patrón , se muestra una información sobre herramientas que especifica que el formato solicitado debe coincidir. Por otro lado, si coincide, se muestra un mensaje de alerta que indica que el formulario se ha enviado correctamente.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<title>Allow only 10 numbers in textbox using jQuery</title>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
#paraID {
font-weight: bold;
font-size: 1.5rem;
}
h1 {
color: green;
font-size: 2.5rem;
}
button {
cursor: pointer;
}
</style>
</head>
<body>
<form onsubmit="alert('Submitted successfully')">
<h1>GeeksforGeeks</h1>
<p id="paraID">jQuery - Allow only 10 numbers in textbox</p>
<input
type="text"
name="numbers"
placeholder="Enter ten digits..."
pattern="\d{10}"
required
title="Ten numbers"
autocomplete="off"
/>
<button type="submit">Submit</button>
</form>
</body>
</html>
Producción:
>
Enfoque 2: Uso de métodos jQuery como keypress . En primer lugar, cree una array que almacene todos los códigos ASCII o valores de los dígitos 0 (valor ASCII 48) a 9 (valor ASCII 57) para que la entrada en el cuadro de texto pueda validarse más adelante. A continuación, establezca la longitud máxima de la entrada en 10 utilizando el atributo de longitud máxima de la etiqueta de entrada .
La propiedad event.which en jQuery detecta qué carácter del teclado se está ingresando en el cuadro de texto. Después de eso, verifique si el código ASCII de cada carácter de entrada es parte de los códigos ASCII en la array. Si el código ASCII del carácter está en la array, el carácter de entrada es válido (0-9). De lo contrario, prohíba que se ingrese el carácter en el cuadro de texto usando preventDefault() .
Por último, creamos una función con todas las funcionalidades discutidas anteriormente y vinculamos esta función a un método de pulsación de tecla que luego se vincula al cuadro de texto. Adjunte el método de envío al formulario para verificar si la entrada dada en el cuadro de texto tiene una longitud de 10. Si coincide, se puede enviar el formulario; de lo contrario, se muestra un mensaje de alerta que indica que la entrada debe contener 10 números.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<title>Allow only 10 numbers in textbox using jQuery</title>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
#paraID {
font-weight: bold;
font-size: 1.5rem;
}
h1 {
color: green;
font-size: 2.5rem;
}
button {
cursor: pointer;
}
</style>
</head>
<body>
<form>
<h1>GeeksforGeeks</h1>
<p id="paraID">jQuery - Allow only 10 numbers in textbox</p>
<input
type="text"
name="numbers"
placeholder="Enter ten digits..."
maxlength="10"
class="textbox"
autocomplete="off"
required
/>
<button type="submit">Submit</button>
</form>
<script type="text/javascript">
$(".textbox").keypress(function (e) {
let myArray = [];
for (i = 48; i < 58; i++) myArray.push(i);
if (!(myArray.indexOf(e.which) >= 0)) e.preventDefault();
});
$("form").submit(function (e) {
if ($(".textbox").val().length === 10) {
alert("Submitted successfully!");
} else {
e.preventDefault();
alert("Enter ten numbers");
}
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por rajatsandhu2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA