Verificação de digitação em campo Data - Javascript

Formulário de entrada da data em HTML

 

O tratamento dos dados do formulário se dá em dois pontos.

Os caracteres digitados, um a um, são tratados pelo evento "onKeyUp" do campo de INPUT "Dt". A função que faz este tratamento é "data_onChange()".

Quando o formulário estiver pronto, e o operador pressionar o botão de "submit" (se o formulário contiver um) ou a tecla ENTER, o evento "onSubmit" vai ser acionado. Este evento é tratado pela função "form_onSubmit()".

A função form_onSubmit de tratamento do evento onSubmit

* 1 * - Colocação do zero à esquerda de números, quando estes forem menores que 10 (vale para dias e meses);
* 2 * - Arranjo com o número máximo de dias de cada mês. Fevereiro é declarado como 29;
* 3 * - Máscara final de data: 3 grupos de números separados por barra ("/");
* 4 * - Construção final da data, inclusive com a inversão mês e dia, característica dos formatos internacionais.

A função data_onChange de tratamento do evento onKeyUp

* 5 * - Máscara que admite letras (maiúsculas e minúsculas);
* 6 * - Previne a digitação de caracteres estranhos no início da data (operador pode esbarrar numa tecla);
* 7 * - Previne a digitação de caracteres estranhos no meio da data (pelo mesmo motivo);

* 8 * - Define as três máscaras válidas enquanto se digita uma data. A verificação deve ir da mais completa até a mais incompleta, senão qualquer coisa é aceita.

Ao final destas rotinas, feche a tag SCRIPT. O formulário deve vir ABAIXO das scripts.

Os eventos da Tag "A" - Abordagem jQuery (Events)

Listagem da Script HTML

A abordagem para explicar estes eventos serão feitas sob o ponto de vista da Biblioteca jQuery, pois ela possui um modelo muito eficiente para lidar com eventos.

Ao executarmos a script, temos a tela:

Passe o mouse sobre os números à esquerda da tela, e clique em um deles (por exemplo o 3):

Ao passar o mouse (mouseover), é mostrada a posição Y do eventos abaixo dos números.

Ao clicar em 3 (ou qualquer número da esquerda), aparece o display do comando alert do javascript.

Posteriormente ...

É mostrada a posição Y do click (mousedown) e o conteúdo do atributo rel (Reg3).

Em jQuery, o click é suprido pelo evento mousedown.

Expressões Regulares em Javascript (Regular Expressions)

Apostila muito interessante sobre situações comuns de utilização de Linguagens Web em que é preciso fazer testes em Javascript para atender às boas e melhores práticas de programação.

Os exemplos se referem às situações práticas enfrentadas por empresas de desenvolvimento de produtos para Web.

Ela é completamente freeware, pois esta é a nossa intenção: a difusão do conhecimento, principal finalidade da rede de Blogs Blogazine.

Esta é a versão 6.

Baixar a Apostila

Javascript e expressões regulares na introdução de datas

A entrada de datas também é algo bem problemático, e alguns desenvolvedores tentaram solucionar apresentando o calendário logo que o campo INPUT correspondente recebe o foco. No entanto, em se tratando de datas muito passadas, a pessoa tem que voltar anos e meses neste calendário (data de admissão, data de nascimento, data de adesão e etc). Neste caso, é preciso digitar a data.

Por esta razão, construímos uma função javascript para checagem da data campo a campo:


function nome_onChange(o){
var str = o.value;
var ori = str;

// Teste de caracteres estranhos
var RegExp = /[\d|\-|\+](\.|\,|\;|\:|\'|\"|\!|\@|\#|\$|\%|\¨|\&|\*|\(|\)|\_|\-|\+|\=|\s|\{|\}|\`|\´|\^|\~|\[|\])/;
var ar = str.match(RegExp);
if( ar != null ) {
// caracter detectado
str = str.replace(ar[1],'/');
o.value = str;
}
var RegExp = /^(\d{1,2})\/(\d{1,2})\/(\d{1,4})|(\d{1,2})\/(\d{1,2})|(\d{1,2})$/;
var ar = ori.match(RegExp);
if( ar != null ) {
// caracter detectado
window.status = ar[1]+"-"+ar[2]+"-"+ar[3]+"-"+ar[4]+"-"+ar[5]+"-"+ar[6];
// Só dia
if( ar[6] != "" ){
if( parseInt(ar[6]) > 31 ){ alert("Dia inválido");}
} else {
// Dia e mês
if( ar[4] != "" ){
if( parseInt(ar[4]) > 31 ){ alert("Dia inválido"); }
if( parseInt(ar[5]) > 12 ){ alert("Mês inválido"); }
} else {
// Dia, mês e ano
if( ar[1] != "" ){
if( parseInt(ar[1]) > 31 ){ alert("Dia inválido"); }
if( parseInt(ar[2]) > 12 ){ alert("Mês inválido"); }
if( parseInt(ar[3]) > 2999 ){ alert("Ano inválido"); }
}
} // do if( ar[4] ...
} // do if( parseInt(ar[6]) ...
} // do if( ar != ...
}

E no HTML colocamos o código de INPUT:

<input name="Data" id="Data" type="text" size="10" onKeyUp="nome_onChange(this);">

Javascript e expressões regulares na introdução de números

Uma das situações que pegam em um INPUT de números decimais em formulários HTML é a questão da entrada de números com parte decimal.

Em nosso caso vamos evitar que o usuário digite um número com separadores de milhar, e substituir o ponto decimal "." por vírgula, para evitar problemas posteriores com o formato internacional comumente aceito.

Formulário de INPUT

O formulário contém um campo de Input com um evento para processamento das teclas APÓS serem liberadas após pressionadas:

 <form name="frm" method="post" action="prg.asp">

<input name="nome" id="nome" type="text" size=10 onKeyUp="nome_onChange(this);">

<input type="submit" value="OK">

</form>

A cada tecla liberada, é chamada a função javascript nome_onChange:

function nome_onChange(o){

var str = o.value;

window.status = str;

// Teste de ponto

var RegExp = /(\.)/;

var ar = str.match(RegExp);

if( ar != null ) {

if( ar[1] == "." ) {

// Ponto decimal detectado

str = str.replace(/\./g,',');

o.value = str

}

}

// Teste de vírgula

var RegExp = /\,[\d]{1,}(\,)/;

var ar = str.match(RegExp);

if( ar != null ) {

if( ar[1] == "," ) {

// Vírgula detectada

str = str.replace(/\,$/g,'');

o.value = str

}

}

// Teste de caracteres estranhos

var RegExp = /[\d|\-|\+][\'|\"|\!|\@|\#|\$|\%|\¨|\&|\*|\(|\)|\_|\-|\+|\=|\s|\{|\}|\`|\´|\^|\~|\[|\]]/;

var ar = str.match(RegExp);

if( ar != null ) {

// caracter detectado

str = str.replace(/.$/g,'');

o.value = str

}

}

Esta função checa, a cada tecla liberada se foi digitada uma vírgula "," ou ponto "." decimal, fazendo a troca no momento devido.

Expressões regulares e replace em ASP

Em ASP o uso de expressões regulares é bem diferente e confuso em relação ao metódico e coerente Javascript.

A seguir, um exemplo de Replace de caracteres acentuados muito útil:


<%
Dim RegEx
Set RegEx = New RegExp
RegEx.Global = True
RegEx.IgnoreCase = True
'Set Resp = RegEx.Execute("olás")
Texto = "olás lilás e olés e olós"
'* Inicio funcional
carac = "á,Á,é,É,í,Í"
codigo = "&aacute;,&Aacute;,&eacute;,&Eacute;,&iacute;,&Iacute;"
arrCar = split(carac,",")
arrCod = split(codigo,",")
i = 0
For Each x in arrCar
Response.write(x&","&i)
RegEx.Pattern = arrCar(i)
Texto = RegEx.replace(Texto, arrCod(i))
i = i + 1
Next
'* Fim funcional
Response.Write "<textarea cols=80 rows=5>"&Texto&"</textarea>"
%>

Javascript na implementação do padrão RTF

Estamos disponibilizando aqui uma biblioteca Javascript, em conjunto com um tutorial explicando como implementar o padrão RTF na composição de textos via programação.

O intuito é, além de prover uma alternativa para as macros de Word, explicar o que existe por detrás do padrão RTF. As macros do Word vem encontrando oposição dos Firewalls, anti-virus e congêneres. A biblioteca utiliza o framework jQuery (freeware).

Baixe o Tutorial:

http://www.4shared.com/office/W_Ol_4_3/Manual_RTF_Javascript.html?

Baixe a Biblioteca:

http://www.4shared.com/document/4B6m8Eax/jqueryrtf-asp.html?

Baixe o manipulador de post (rtf.asp):

http://www.4shared.com/get/hKN9hy8P/rtf.html

A biblioteca jQuery está em www.jquery.com.

Quaisquer dúvidas, poste um comentário neste blog.