9.1 Exemplos de aplicação III: Trabalhando com a propriedade length
Esta é uma das propriedades mais úteis destes objetos. Com esta propriedade, poderemos limitar uma quantidade de caracteres mínimo, máximo ou absoluto. Veremos então, 4 exemplos:
1. LIMITE MÍNIMO DE CARACTERES
O script...
<script language="javascript">
function validarCampo1(form)
{
if (form.palavra1.value.length < 6)
{
alert('Deve introduzir uma palavra com um mínimo de 6 caracteres');
form.palavra1.focus(); return true;
}
}
</script>
O formulário...
<form name="form1" method="post">
Mínimo 6 caracteres: <input type="text" name="palavra1">
<input type="button" onClick="validarCampo1(this.form)" value="Enviar">
</form>
O resultado...
2. LIMITE MÁXIMO DE CARACTERES
O script...
<script language="javascript">
function validarCampo2(form)
{
if (form.palavra1.value.length > 6)
{
alert('Deve introduzir uma palavra com um máximo de 6
caracteres');
form.palavra1.focus(); return true;
}
}
</script>
<form name="form2" method="post">
Máximo 6 caracteres: <input type="text" name="palavra1">
<input type="button" onClick="validarCampo2(this.form)" value="Enviar">
</form>
Os resultados...
3. LIMITE ABSOLUTO DE CARACTERES
O script...
<script language="javascript">
function validarCampo3(form)
{
if (form.palavra1.value.length != 6)
{
alert('Deve introduzir uma palavra de 6 caracteres');
form.palavra1.focus(); return true;
}
}
</script>
O formulário...
<form name="form3" method="post">
Introduz somente 6 caracteres: <input type="text" name="palavra1">
<input type="button" onClick="validarCampo3(this.form)" value="Enviar">
</form>
Os resultados...
4. LIMITE MÍNIMO E MÁXIMO DE CARACTERES
O script...
<script language="javascript">
function validarCampo4(form)
{
var a = form.palavra1.value.length
if ((a < 6) || ( a > 12))
{
alert('Deve introduzir uma palavra com um mínimo de 6
caracteres e um máximo de 12');
form.palavra1.focus(); return true;
}
}
</script>
O formulário...
<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>
Os resultados...
Da mesma forma, podemos fazer o seguinte:
Que a medida que o usuário escreva no campo de texto lhe informe a quantidade de caracteres que escreveu e/ou os restantes.
Que ao pressionar o botão, não só o alerte do erro de caracteres introduzidos, como também o informe da quantidade de caracteres que escreveu, o excesso ou resto de caracteres produzidos.
Vejamos os seguintes exemplos baseados em uma amplitude máxima de 50 caracteres no primeiro caso e uma longitude absoluta de 12 caracteres no segundo:
QUANTIDADE DE CARACTERES ESCRITOS E CARACTERES RESTANTES
O Script...
<script language="javascript">
function contar(form)
{
n = form.campo.value.length;
t = 50;
{
form.escritos.value = n;
form.restantes.value = (t-n);
}
}
</script>
O formulário...
<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>
Os resultados...
QUANTIDADE DE CARACTERES EXCEDIDOS E CARACTERES FALTANTES
O Script...
<script
language="javascript">
function validarCampo5(form)
{
c = 12; // quantidade máxima de caracteres
L = form.campo.value.length;
// e é o excedido
// f é o faltante
if (L > c) { e = (L-c); error = 1; }
if (L < c) { f = (c-L); error = -1; }
if ((L != c) && (error == -1))
{
alert("O campo contém " + f + " caracteres menos aos solicitados");
form.campo.focus(); return true;
}
if ((L != c) && (error == 1))
{
alert("O campo contém " + e + " caracteres mais aos solicitados");
form.campo.focus(); return true;
}
}
</script>
O formulário...
<form name="form6" method="POST">
Escrever só 12 caracteres: <input type="text" name="campo" size="12"><br>
<input type="button" value="Enviar" onClick="validarCampo5(this.form)">
</form>
Os resultados...
