> Manuales > Formularios y Javascript

Utilización de la propiedad length, aplicada a varios ejemplos

9.1 Ejemplos de aplicación III: Trabajando con la propiedad length


Esta es una de las propiedades más útiles de estos objetos. Con esta propiedad, podremos limitar una cantidad de caracteres mínimo, máximo o absoluto. Veremos entonces, 4 ejemplos:

 

1. LÍMITE MÍNIMO DE CARACTERES


 

El script...

 

<script languaje="javascript">

function validarCampo1(form)

{

    if (form.palabra1.value.length < 6)

    {

    alert('Debes introducir una palabra con un mínimo de 6 caracteres'); 

    form.palabra1.focus(); return true;

    }

}

</script>

 

 

El formulario...

 

<form name="form1" method="post">

Mínimo 6 caracteres: <input type="text" name="palabra1">

<input type="button" onClick="validarCampo1(this.form)" value="Enviar">

</form>

 

El resultado...

Mínimo 6 caracteres:

 

2. LÍMITE MÁXIMO DE CARACTERES


 

El script...


<script languaje="javascript">
function validarCampo2(form)
{
    if (form.palabra1.value.length > 6)
    {
    alert('Debes introducir una palabra con un máximo de 6 caracteres');
    form.palabra1.focus(); return true;
    }
}
</script>

El formulario...


<form name="form2" method="post">
Máximo 6 caracteres: <input type="text" name="palabra1">
<input type="button" onClick="validarCampo2(this.form)" value="Enviar">
</form>

 

Los resultados...

Máximo 6 caracteres:

 

3. LÍMITE ABSOLUTO DE CARACTERES


 

El script...


<script languaje="javascript">
function validarCampo3(form)
{
    if (form.palabra1.value.length != 6)
    {
    alert('Debes introducir una palabra de 6 caracteres');
    form.palabra1.focus(); return true;
    }
}
</script>

 

El formulario...


<form name="form3" method="post">
Introduce solo 6 caracteres: <input type="text" name="palabra1">
<input type="button" onClick="validarCampo3(this.form)" value="Enviar">
</form>

 

Los resultados...

Introduce solo 6 caracteres:

 

4. LÍMITE MÍNIMO Y MÁXIMO DE CARACTERES


 

El script...


<script languaje="javascript">
function validarCampo4(form)
{
var a = form.palabra1.value.length
    if ((a < 6) || ( a > 12))
    {
    alert('Debes introducir una palabra con un mínimo de 6 caracteres y un máximo de 12');
    form.palabra1.focus(); return true;
    }
}
</script>

 

El formulario...


<form name="form4" method="post">
Mínimo 6 caracteres, máximo 12: <input type="text" name="palabra1">
<input type="button" onClick="validarCampo4(this.form)" value="Enviar">
</form>

 

Los resultados...

Mínimo 6 caracteres, máximo 12:

De igual modo, podemos hacer lo siguiente:

Veamos los siguientes ejemplos basados en una amplitud máxima de 50 caracteres en el primer caso y una longitud absoluta de 12 caracteres en el segundo:

CANTIDAD DE CARACTERES ESCRITOS Y CARACTERES RESTANTES


 

El Script...

 

<script languaje="javascript">

function contar(form)

{
n = form.campo.value.length;
t = 50;
    {
    form.escritos.value = n;
    form.restantes.value = (t-n);
    }
}
</script>

 

El formulario...

 

<form name="form5" method="POST">

Máximo 50 caracteres: <input type="text" name="campo" size="50" maxlength="50" onKeyUp="contar(this.form)"><br>

Escritos: <input type="text" ReadOnly name="escritos" size="2" value="0">

Restantes: <input type="text" ReadOnly name="restantes" size="2" value="50">

</form>

 

Los resultados...

Máximo 50 caracteres:
Escritos: Restantes:

 

CANTIDAD DE CARACTERES EXCEDIDOS Y CARACTERES FALTANTES


 

El Script...

 

<script languaje="javascript">
function validarCampo5(form)
{
c = 12; // cant. máxima de caracteres
L = form.campo.value.length;
// e es el excedido
// f es el faltante

    if (L > c) { e = (L-c); error = 1; }
    if (L < c) { f = (c-L); error = -1; }

    if ((L != c) && (error == -1))
    {
    alert("El campo contiene " + f + " caracteres menos a los solicitados");
    form.campo.focus(); return true;
    }

    if ((L != c) && (error == 1))
    {
    alert("El campo contiene " + e + " caracteres más a los solicitados");
    form.campo.focus(); return true;
    }
}
</script>
 

El formulario...

 

<form name="form6" method="POST">

Escribir solo 12 caracteres: <input type="text" name="campo" size="12"><br>

<input type="button" value="Enviar" onClick="validarCampo5(this.form)">

</form>

 

Los resultados...

Escribir solo 12 caracteres:

 

Eugenia Bahit

Analista Programadora LAMP y Scrum Coach

Manual