quinta-feira, 27 de setembro de 2012

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

quarta-feira, 26 de setembro de 2012

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);">







segunda-feira, 24 de setembro de 2012

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.