a validação do formulário vue ---- uso Vee-validate

uso vee-validate

* Este artigo é para certos amigos com base Vue2.0 referência ao uso da situação real do projeto, sobre o uso do Vue não é explicação supérfluo.

Primeiro, instale

npm instalar vee-validate @ próxima --save

Nota: @next, caso contrário versão é Vue1.0

bower instalar vee-validate # 2.0.0-beta.13 --save

Em segundo lugar, a referência

importação Vue de 'vue' ; 
importação VeeValidate do 'vee-validate' ; 
Vue.use (VeeValidate);

configurações do componente:

importação VeeValidate, {Validador} do 'vee-validate' ; 
mensagens de importação de 'assets / js / zh_CN' ; 
Validator.updateDictionary ({ 
    zh_CN: { 
        mensagens 
    } 
}); 
const configuração = { 
    errorBagName: 'erros', // mudança se os conflitos de propriedade. 
    atraso: 0 , 
    locale: 'zh_CN' , 
    mensagens: nulos , 
    estrito: verdadeiro 
}; 
Vue.use (VeeValidate, config);

ativos / js / zh_CN representa um diretório para armazenar o pacote de idiomas, copiado de node_modules vee-validate / dist / locale seguinte / diretório para o seu projeto
do validador muitas outras aplicações abaixo de revisita.
verificar, mensagens em nome de informações de validação personalizada, rigorosos = verdadeiros representantes não definir as regras do formulário não verificar, errorBagName pertencem a aplicações avançadas, erros personalizados após os outros parâmetros de configuração, atraso representa o número de entrada ms, a ser estudado

Em terceiro lugar, com base no uso

< Div class = "coluna é-12" > 
    < rótulo class = "rótulo" para = "email" > e-mail </ rótulo > 
    < p class = "controle" > 
        < entrada v-validar os dados-regras = "necessária | e-mail " : class =" { 'input': true, 'é-perigo': errors.has ( 'email')}" nome = "" email tipo = "" texto espaço reservado = "email" > 
        < extensão v-show = "erros.tem ( 'email')" class = "ajuda é-perigo" >{{Errors.first ( 'email')}} </ palmo > 
    </ p > 
</ div >

 

Lembrete: mensagem de erro no interior é geralmente o nome do atributo nome forma, a menos que seja passado para dentro através do exemplo vue.
Lembrete: desenvolver um bom hábito, adicione a cada campo namede propriedade, se não houver nenhuma namepropriedade e sem valor vinculativo, em seguida, validador não pode ser soma de verificação correta

Sobre errors:

O código acima vemos errors.has, errors.first, erros são incorporadas os componentes de um modelo de dados para armazenar e processar a mensagem de erro, você pode chamar os seguintes métodos:

• errors.first('field') - Obter a primeira mensagem de erro sobre o campo atual de
• collect('field') - Obter todas as informações sobre o campo atual do erro (lista)
• has('field') - atual entrou com pedido de erros (true / false)
• all() - Todos corrente de erro de formulário (lista)
• any() - a forma atual por quaisquer erros (true / false)
• add(String field, String msg) - Adicionar um erro
• clear() - Limpar erro
• count() - o número de erros
• remove(String field) - Limpar o arquivado de todos os erros

emValidator

Validador é $validatorpara ser automaticamente injectadas em vue ocorrência do componente. Mas também pode ser chamado de independente, usado para verificar manualmente o formulário para forma legítima de passar um objeto, que atravessam o campo especificado.

import {Validador} do 'vee-validate' ; 
validador const = new Validator ({ 
    e-mail: 'necessária | e-mail' , 
    nome: 'necessária | alpha | min: 3' , 
}); 
// ou Validator.create ({...});

Depois de definir o objeto parâmetros também podem ser construídos no validador

import {Validador} do 'vee-validate' ; 
validador const = novo validador (); 

validator.attach ( 'email', 'necessário | e-mail'); // anexar campo. 
validator.attach ( 'name', 'necessário | alpha', 'Nome completo'); // anexar campo com o nome de exibição para a geração de erro. 

validator.detach ( 'email'); // você também pode separar campos.

Finalmente, você também pode passar um valor diretamente para o campo, testar se é possível, verificando, assim:

Validator.validate ( 'Email', '[email protected]'); // a verdadeira 
validator.validate ( 'E-mail', 'foo bar @'); // false 
// ou uma pluralidade de verificar simultaneamente: 
validator.validateAll ({ 
    E-mail: '[email protected]' , 
    name: 'John Snow' 
}); 
// desde que haja uma verificação falhar, ele retorna false

Em quarto lugar, o built-in regras de validação

• after{target} - uma data alvo legítimo é muito maior do que o formato (DD / MM / AAAA)
• alpha - contêm apenas caracteres em inglês
• alpha_dash - podem incluir Inglês, números, sublinhados, traços
• alpha_num - pode conter alfanumérico
• before:{target} - e depois o oposto
• between:{min},{max} - número de entre os valores mínimo e máximo
• confirmed:{target} - deve ter como alvo o mesmo
• date_between:{min,max} - data entre mínimo e máximo
• date_format:{format} - formato legal para formatar datas
• decimal:{decimals?} - Digital, e é decimais binárias
• digits:{length} - comprimento do comprimento do digitais
• dimensions:{width},{height} - Imagem em consonância com as disposições da largura e altura
• email - não explicam
• ext:[extensions] - extensão
• image - Fotos
• in:[list] - O valor contido em uma matriz de lista
• ip - Endereço IPv4
• max:{length} - O comprimento máximo de caracteres de comprimento
• mimes:[list] - Tipos de Arquivo
• min - inversa max
• mot_in - no sentido inverso
• numeric - permite apenas números
• regex:{pattern} - O valor deve estar de acordo com um padrão regular
• required - não explicam
• size:{kb} - O tamanho do arquivo não excede
• url:{domain?} - (especificado nome de domínio) url

Em quinto lugar, as regras de validação personalizada

1. Dirigir a definição

Validador = const (valor, args) => {
     // Retorno A ou A booleana Promise. 
}
 // forma mais básica, só retorna um valor booleano ou promessa, com o erro padrão

2. Forma objecto

Validador = const { 
    a getMessage (Campo, args) { // adicionar à mensagem de erro padrão em Inglês que 
        // devolve uma mensagem. 
    }, 
    O validate (valor, args) { 
        // Retorna um booleano ou uma promessa. 
    } 
};

3. Adicione a mensagem de erro específico do idioma

Validador = const { 
    mensagens: { 
        EN: (campo, args) => {
             // Inglês error 
        }, 
        CN: (campo, args) => {
             // erro chinesa 
        } 
    }, 
    o validate (valor, args) { 
        / / Retorna um booleano ou uma promessa. 
    } 
};

 

Depois de criar uma regra, estender o método pelo qual adicionado ao Validador

import {Validador} do 'vee-validate' ; 
const isMobile = { 
    mensagens: { 
        en: (campo, args) => campo + '必须是11位手机号码' , 
    }, 
    validar: (valor, args) => {
        return value.length == 11 && / ^ ( (13 | 14 | 15 | 17 | 18) [0-9] {1} \ d {8}) $ / .test (valor) 
    } 
} 
Validator.extend ( 'móvel', isMobile);

//或者直接 Validator.extend('mobile', { messages: { en:field => field + '必须是11位手机号码', }, validate: value => { return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value) } });

Então você pode tomar diretamente para o uso do celular como um built-in regras:

< Entrada v-validar os dados-regras = "necessária | mobile" : class = "{ 'input': true, 'é-perigo': errors.has ( 'mobile')}" nome = "mobile" tipo = "text " espaço reservado =" mobile" > 
< extensão v-show = "errors.has ( 'mobile')" class = "ajuda é-perigo" > {{errors.first ( 'mobile')}} </ palmo >

 

4. Custom built-in mensagens de erro regras

Importar {o Validador} de 'VEE-a validar' ; 

const dicionário = { 
    EN: { 
        mensagens: { 
            alfa: () => 's Alguns Dictionary Dicionário Inglês a mensagem' 
        } 
    }, 
    NC: { 
        mensagens: { 
            alfa: () => 'para alpha mal definidas regras descritas em chinês ' 
        } 
    } 
}; 

Validator.updateDictionary (dicionário);