Validador de formulário simples e reutilizável

Este é o manual do validador de formulário simples para o programador. Para entender o que é o validador e como usá-lo, consulte o manual de uso.

Criando novas validações

Para criar um novo tipo de validação basta criar uma função que valide o campo. Esta função recebe como primeiro parâmetro uma string com o valor do campo, e como segundo parâmetro o próprio campo de formulário. Se você não vai usar o segundo parâmetro, não precisa declará-lo ao criar sua função. Por exemplo, para validar contas bancárias no formato 0000-0 podemos usar:

/*
  Valida conta bancária. Retorna true para, por exemplo:
  1-2
  33-0
  3425-9
  0045-6
  450-2
  Também retorna true para uma string vazia.
*/
function validaConta(t){
  return t.replace(/\d{1,4}-\d/,"")==""
}

Em seguida é preciso registrar a função e uma mensagem de erro para ela, assim:

validadores.vConta=validaConta
erros.vConta="digite sua conta bancária com o dígito."
Pronto.

Mostrando os erros

Para mostrar os erros de maneira diferente, basta sobrescrever a função showErros. Veja como é a função original:

function showErros(er){
    var txterr="Por favor, corrija os seguintes erros:\n"
    for(var i=0;i<er.length;i++){
        txterr+=" * "+er[i][0].parentNode.innerHTML.replace(/<[^>]*>| *: */g,"")+": "+er[i][1]+"\n"
        er[i][0].parentNode.className+=" vErro"
    }
    alert(txterr)
}
A função showErros recebe um array de erros. Cada erro é um array contendo, como primeiro elemento, o campo de formulário onde ocorreu o erro, e como segundo elemento a mensagem de erro. Veja, por exemplo, como podemos mostrar as mensagens de erro em um div do HTML ao invés de mostrá-las num alert:
/*
 Aqui redefinimos a função que mostra os erros, para mostrá-los de 
 um jeito melhor do que o alert simplório.
*/

function showErros(er){
    $("#msg").hide()
    var txterr="<div><p>Por favor, corrija os seguintes erros:</p><ol>"
    for(var i=0;i<er.length;i++){
        txterr+="<li>"+er[i][0].parentNode.innerHTML.replace(/<[^>]*>| *: */g,"")+
                ": "+er[i][1]+"</li>"
        er[i][0].parentNode.className+=" vErro"
    }
    $("#msg").html(txterr+"</ol></div>")
    $("#msg").show("slow")
}
Você pode ver esse exemplo funcionando.
Elcio Ferreira, 2007