O Vuerify é um plug-in simples e leve de verificação de dados. Regras de verificação básica internas e instruções de erro. Regras personalizáveis e os tipos de regras suportam regulares, funções ou strings. As regras de verificação podem ser registradas globalmente ou dentro dos componentes. O plug-in adicionará o objeto $ Vuerify à VM e, ao mesmo tempo, assista aos dados e verificará a legalidade. Se houver um erro, vm. $ Vuerify. $ Erros serão armazenados.
Instalar
npm i vuerify -S
usar
Instale os plug-ins
importar vue de 'vue'import vuerify de' vuerifify'vue.use (vuerify, /* adicione regras personalizadas* /)
Adicione regras personalizadas
O teste pode ser uma função regular ou uma
{requerido: {test: // s+$/, mensagem: 'requerir'}}Registre -se em componentes
{data () {nome de usuário: '', senha: ''}, vuerify: {nome de usuário: {test: // w {4,}/, // Regras personalizadas, que podem ser funções, regras de registro regulares ou globais (preenchem as strings).API
$ Vuerify contém as seguintes propriedades
Nomeado valor do valor
$ erros Mensagem de erro Falha ao verificar os dados, por exemplo, se o nome de usuário não conseguir verificar, ele retornará {nome de usuário: 'pelo menos 4 caracteres'} objeto {}
Inválides tem campo que não conseguiu verificar o booleantue
Válido não tem um campo que não verifique o booleanfalse
Verifique a verificação do campo especificado, passe-o na matriz e retorne a função boolean (Array)-
Função clara da lista de erros-
V-Vuerrify
Esta diretiva valida os dados e define um nome de classe para o componente quando o componente do formulário aciona um evento Blur (o padrão é .vuerify-invalid). Pode ser componentes nativos, como entrada, ou pode ser um componente que foi encapsulado por si só. Duas versões estão disponíveis
Instalar
# Vue 1.xnpm v-vuerify -s# vue 2.0npm v-vuerify-next -s
uso
Importar vue de 'vue'import vuerififyDirective de' v-vuerify '// vue1.ximport vuerififyDirective de' v-vuerify-next '// vue2.0vue.use (vuerififyDirection) <input v-model = "username" v-serfy = "username) <input)" username "v-v-strerify =" username) <input " v-vuerify = "'senha'"> </-in-input>
Param
VerifiqueInValidClass
O nome da classe padrão é vuerify-invalid
<input v-model = "nome de usuário" v-vuerifify = "'' nome de usuário '" vuerrify-invalid-class = "error">
Modificadores
pai
Se o Vuerify for registrado com o componente pai, você precisará especificar um pai para que a diretiva possa obter o $ Vuerify correspondente do componente pai. Para detalhes, veja a demonstração
Eventos
vuerify-invalid
Vuerify-válido
Github: https://github.com/qingwei-li/vuerrify