zValidate v0.2
Um simples validador de formulários
Instalação
Inclua os arquivos zvalidate.min.css
e zvalidate.min.js
ao seu arquivo arquivo HTML
<link href="zvalidate.min.css" rel="stylesheet">
<script src="zvalidate.min.js" type="text/javascript"></script>
Uso
Adicione o atributo z-validate
aos formulários que deseja validar
<form z-validate></form>
Adicione os atributos zv-rule
e zv-error
ou zv-error-[rule]
ao input que receberá a validação.
O atributo zv-rule
definirá quais regras de validação deverão ser usadas.
O atributo zv-error
ou zv-error-[rule]
definirá qual mensagem deverá ser mostrado no tooltip em caso de erro.
<form z-validate>
<input type="text" id="input1" name="input1" zv-rule="email" data-message="Email inválido">
</form>
Algumas regras podem receber um parâmetros. Esse parâmetro pode ser informado usando a seguinte sintaxe
zv-rule="date:Ydm"
. É possível também definir mais de uma regra para um input, as mesmas devem ser encadeadas usando o separador |
.
Ex:
zv-rule="date:Ymd|required"
###Regras padrões
required
Define que o campo não pode ser deixado vazio.
<input type="text" zv-rule="required" data-message="Campo obrigatorio" id="exemplo1">
email
Define que o campo deve conter um endereço de email.
<input type="text" zv-rule="email" data-message="Email inválido" id="exemplo2">
integer
Define que o campo deve conter o número inteiro.
<input type="text" zv-rule="integer" data-message="Não é um número inteiro" id="exemplo3">
decimal
Define que o campo deve conter o número decimal.
<input type="text" zv-rule="decimal" data-message="Não é um número decimal" id="exemplo4">
minLength: 999
Define que o campo deve conter um número mínimo de caracteres
<input type="text" zv-rule="minLength:100" data-message="Deve conter 100 caracteres" id="exemplo5">
maxLength: 999
Define que o campo pode conter até um numero máximo de caracteres
<input type="text" zv-rule="maxLength:25" data-message="Deve conter ate 25 caracteres" id="exemplo6">
date: (Ymd|dmY)
Define que o campo deve conter uma data válida. Caso não seja informado um formato de data será usado Ymd
<input type="text" zv-rule="date:dmY" data-message="Data inválida" id="exemplo7">
ip
Define que o campo deve um endereço IP
<input type="text" zv-rule="ip" data-message="IP inválido" id="exemplo7">
url
Define que o campo deve conter uma URL válida
<input type="text" zv-rule="url" data-message="URL inválida" id="exemplo7">
equals: id
Define que o campo deve ter o valor igual a um outro campo definido
<input type="text" zv-rule="required" data-message="Campo obrigatório" id="password">
<input type="text" zv-rule="equals:password" data-message="Os campos não conferem" id="conf_password">
checked
Define que campo do tipo radio ou checkbox deve ser marcado
<input type="radio" name="myRadioInput" value="25" zv-rule="radio:myRadioInput" data-message="Selecione uma opçao">
<input type="radio" name="myRadioInput" value="50" />
<input type="radio" name="myRadioInput" value="100" />
diff: arg
Define que campo deve conter um valor diferente do argumento (Indicado para selects)
<select name="exemplo9" id="exemplo9" zv-rule="diff:0" data-message="Value deve ser diferente de 0">
<option value="0">Selecione algo</option>
<option value="1">Opçao 1</option>
<option value="2">Opçao 2</option>
<option value="3">Opçao 3</option>
<option value="4">Opçao 4</option>
<option value="5">Opçao 5</option>
</select>
###Criando regras personalizadas
Se as regras padrões não forem suficientes para a sua aplicação é possível criar regras de validação personalizadas. Para adicionar uma nova regra use o método zValidate.rule
.
zValidate.extensions ( name, extension )
Tipo | Parâmetro | Descrição |
---|---|---|
String | name | Nome para a nova regra |
Function | rule(arg) | Implementação da regra de validação |
String | rule.arg | Argumento opcional para a regra |
Ex:
zValidate.rule('novaRegra', function (arg) {
// ...
});
OBS: As funções adicionadas devem ter um retorno booleano.
Dependências
- jQuery >= 1.8.0
###Licença MIT
(c) 2013 - Bruno Silva | eu@brunoziie.com