Una máscara de entrada es una expresión de string que demuestra el formato de un valor de entrada de usuario válido o podemos decir que restringe la entrada de usuario. Esto es muy útil si hay ciertas entradas en los formularios que requieren validación. En este artículo, aprenderemos cómo aplicar una máscara de entrada para validar un número de teléfono en un elemento de entrada usando jQuery.
Hay dos enfoques que se pueden tomar aquí:
Enfoque 1: con el complemento jQuery inputmask , hay tres campos de entrada definidos en el siguiente ejemplo, cada uno con una clase de primer teléfono , segundo teléfono y tercer teléfono, respectivamente. Seleccionamos estos elementos usando el selector de clase jQuery [$(“.class-name”)] y luego aplicamos el método inputmask() del complemento inputmask en cada elemento de entrada. El parámetro de este método inputmask() toma la expresión de string especificada para restringir la entrada del usuario. En este caso, configuramos tres formatos diferentes de números de teléfono para los tres campos de entrada.
Enlace CDN:
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.7/jquery.inputmask.min.js”></script>
Nota: este enlace debe incluirse en la página de índice para utilizar el complemento jQuery inputmask y así implementar todas sus funcionalidades.
Sintaxis:
$(document).ready(function(){
// A static mask
$(selector).inputmask("99-9999999");
// Mask which specifies options
$(selector).inputmask({"mask": "(999)-999-9999"});
});
Ejemplo: El siguiente ejemplo ilustra el uso de jQuery Input Mask Phone Number Validation usando el complemento .inputmask() .
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Required for using jQuery input mask plugin -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.7/jquery.inputmask.min.js">
</script>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 40px;
}
p {
font-size: 30px;
font-weight: bold;
}
div:not(:last-child) {
margin-bottom: 2rem;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<p>jQuery - Input Mask Phone Number Validation</p>
<form>
<div>
<label>Phone Number 1:</label>
<input type="text" name="phone"
class="first-phone"
placeholder="(999)-999-9999" />
</div>
<div>
<label>Phone Number 2:</label>
<input type="text" name="phone"
class="second-phone"
placeholder="(99)-9999-9999" />
</div>
<div>
<label>Phone Number 3:</label>
<input type="text" name="phone"
class="third-phone"
placeholder="+99-9999999999" />
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
$(".first-phone").inputmask("(999)-999-9999");
$(".second-phone").inputmask("(99)-9999-9999");
$(".third-phone").inputmask("+99-9999999999");
});
</script>
</body>
</html>
Producción:
Enfoque 2: usar el complemento jQuery maskedinput . Hay cuatro campos de entrada definidos en el siguiente ejemplo, cada uno con una clase de primer teléfono , segundo teléfono, tercer teléfono y cuarto teléfono, respectivamente. Seleccionamos estos elementos usando el selector de clase jQuery [$(“.class-name”)] y luego aplicamos el método mask() del complemento maskedinput en cada elemento de entrada. El parámetro de este método mask() toma la expresión de string especificada para restringir la entrada del usuario. En este caso, configuramos cuatro formatos diferentes de números de teléfono para los cuatro campos de entrada.
Enlace CDN:
<origen del guión=
“https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js”>
</script>
Nota: este enlace debe incluirse en la página de índice para utilizar el complemento jQuery maskedinput y así implementar todas sus funcionalidades.
Sintaxis:
$(document).ready(function(){
$(selector).mask("99-9999999");
});
Ejemplo: a continuación se muestra el ejemplo que ilustra el uso de JQuery Input Mask Phone Number Validation usando el complemento .mask() .
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Required for using jQuery maskedinput plugin -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js">
</script>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 40px;
}
p {
font-size: 30px;
font-weight: bold;
}
div:not(:last-child) {
margin-bottom: 2rem;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<p>jQuery - Input Mask Phone Number Validation</p>
<form>
<div>
<label>Phone Number 1:</label>
<input type="text" name="phone"
class="first-phone"
placeholder="(99)-9999-9999" />
</div>
<div>
<label>Phone Number 2:</label>
<input type="text" name="phone"
class="second-phone"
placeholder="+99-9999999999" />
</div>
<div>
<label>Phone Number 3:</label>
<input type="text" name="phone"
class="third-phone"
placeholder="(999)-999-9999" />
</div>
<div>
<label>Phone Number 4:</label>
<input type="text" name="phone"
class="fourth-phone"
placeholder="+999-99-99-999999" />
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
$(".first-phone").mask("(99)-9999-9999");
$(".second-phone").mask("+99-9999999999");
$(".third-phone").mask("(999)-999-9999");
$(".fourth-phone").mask("+999-99-99-999999");
});
</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