jedi validate
v1.5.6
Jedi Validate é um componente leve de validação de formulário.
Esta é uma classe JS e você pode criar uma nova instância passando um elemento DOM e um objeto de opções.
// npm install jedi-validate
import JediValidate from 'jedi-validate' ;
const JediValidate = new JediValidate ( document . querySelector ( '#form5' ) ) ;Por padrão, o formulário será enviado via ajax com os parâmetros que foram definidos em HTML.
Por fornecer um formato JSON estrito para interação, você pode enviar um formulário de muitas maneiras diferentes:
Mas a resposta do servidor sempre possui uma estrutura. É mais fácil de implementar.
Se você quiser construir o código-fonte, executar testes ou contribuir, primeiro bifurque ou clone este repositório em sua máquina local. Certifique-se de que o NodeJS e o npm estejam instalados. Faça check-in em um terminal com node -v e npm -v .
Para instalar as dependências do projeto, primeiro execute,
npm install
Para construir o código-fonte e observar as alterações na execução do terminal,
npm run build
Para agrupar a fonte e servi-la em localhost:4000 execute,
npm run dev
Isso abrirá um servidor local webpack onde você pode navegar até o diretório ou recurso desejado. A página de teste está localizada em example/bootstrap.html
Os testes ainda não foram concluídos e ocorrerão erros de tempo de execução ao tentar executar os testes no console ou por meio do navegador de teste.
Existem três tipos de opções:
{
ajax : {
url : null ,
enctype : 'application/x-www-form-urlencoded' ,
sendType : 'serialize' , // 'formData', 'json'
method : 'GET'
} ,
rules : { } ,
messages : { } ,
containers : {
parent : 'form-group' ,
message : 'help-block' ,
baseMessage : 'base-error'
} ,
states : {
error : 'error' ,
valid : 'valid' ,
pristine : 'pristine' ,
dirty : 'dirty'
} ,
callbacks : {
success : function ( ) {
} ,
error : function ( ) {
}
} ,
clean : true ,
redirect : true
} Na opção ajax definimos como enviar o formulário. Pode ser null se não quisermos que o formulário seja enviado, ou pode ser um objeto com as seguintes opções:
padrão: null Pode ser substituído pelo atributo do formulário action ou pelas opções de inicialização.
padrão: 'application/x-www-form-urlencoded' Pode ser substituído pelo atributo de formulário enctype , opções de inicialização ou sendType .
padrão: 'GET' Pode ser substituído pelo atributo de formulário method ou pelas opções de inicialização.
padrão: 'serialize'
Você pode codificar e enviar os dados de três maneiras diferentes. As opções válidas são:
'formData' - envia o formulário como FormData. 'Content-type' para 'multipart/form-data''json' - envia o formulário como um objeto JSON. Defina 'Content-type' como 'application/json; charset=utf-8''serialize' - envia o formulário como uma solicitação normal. Defina 'Content-type' como 'application/x-www-form-urlencoded'Os arquivos só podem ser enviados usando a codificação 'formData'.
name=111&phone=222222222&email=wow%40wow.com
-----------------------------678106150613000712676411464
Content-Disposition: form-data; name="name"
111
-----------------------------678106150613000712676411464
Content-Disposition: form-data; name="phone"
222222222
-----------------------------678106150613000712676411464
Content-Disposition: form-data; name="email"
...
{ "name" : " 111 " , "phone" : " 222222222 " , "email" : " [email protected] " , "file" : " index.html " }Regras usadas para validar a entrada. Cada elemento do formulário será correspondido pelo atributo 'nome' com uma regra correspondente, se existir. Se nenhuma regra existir, nenhuma validação ocorrerá.
As regras não são definidas por padrão, mas podem ser definidas por meio de atributos ou classes em HTML ou nas opções de inicialização.
- obrigatório: booleano
- regexp: RegExp
- e-mail: booleano
- tel: booleano
- url: booleano
- tamanho do arquivo: número
- extensão: string
Esses atributos podem ser usados
- tipo - email, tel ou url (regexp será usado para cada tipo)
- padrão - regexp com valor de atributo
- obrigatório - verifique a entrada para valor vazio
Exemplo:
< input id =" name " type =" text " name =" name " required class =" required " >
< input id =" email " type =" email " name =" email " class =" required " > Você pode definir suas próprias regras usando a função addMethod :
JediValidate . addMethod ( 'methodName' , function ( value , options ) {
return true // true if valid
} , 'Error message' ) ;Adicione regras como parte do seu objeto de opções ao inicializar:
const validator = new JediValidate ( formWrapper , {
rules : {
name : {
required : true
} ,
email : {
email : true
} ,
phone : {
regexp : / ^([+]+)*[0-9x20x28x29-]{5,20}$ /
} ,
file : {
filesize : 10000 ,
extension : "html|css|txt"
}
file2 : {
filesize : [ 10000 , "two-files-checkbox" ] , // check only if checkbox checked
extension : [ "html|css|txt" , "two-files-checkbox" ] , // without recollect by default
another : [ 'param' , function ( oldData ) {
const newData = validator . collect ( 'two-files-checkbox' ) ; // manual data recollect for concrete field
return ! ! newData [ 'two-files-checkbox' ] ;
} ] ;
}
}
} ) ;Você pode coletar dados de todo o formulário ou apenas pelo nome de entrada. O método retorna novos dados.
validator . collect ( ) ; // all form
validator . collect ( 'two-files-checkbox' ) ; // one field Você pode definir suas próprias mensagens de erro caso a validação falhe. Caso um elemento do formulário falhe na validação, a mensagem correspondente ao atributo 'nome' do elemento será aplicada.
messages : {
phone : {
regexp : "Invalid phone number"
} ,
file : {
filesize : "File is too big"
}
} ,
