Vuerify es un complemento de verificación de datos simple y liviano. Reglas de verificación básicas incorporadas y indicaciones de error. Las reglas personalizables y los tipos de reglas admiten regularmente, funciones o cuerdas. Las reglas de verificación se pueden registrar a nivel mundial o dentro de los componentes. El complemento agregará el objeto $ Vuerify a VM, y al mismo tiempo verá los datos y verificará la legalidad. Si hay un error, VM. $ Vuerify. $ Los errores se almacenarán.
Instalar
npm i vuerify -S
usar
Instalar complementos
Importar vue desde 'Vue'Import Vuerify desde' Vuerify'vue.use (vuerify, /* Agregar reglas personalizadas* /)
Agregar reglas personalizadas
La prueba puede ser regular o una función
{requerido: {test: // s+$/, mensaje: 'requerido'}}Regístrese dentro de los componentes
{data () {username: '' ', contraseña:' '}, vuerify: {username: {test: // w {4,}/, // reglas personalizadas, que pueden ser funciones, reglas de registro regulares o globales (complete las cadenas):' al menos 4 caracteres '}, contraseña:' requeridas '// reglas para usar global}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}API
$ Vuerify contiene las siguientes propiedades
Valor de CamenCedyPedEppedEfault
$ Errores Mensaje de error No verificar los datos, por ejemplo, si el nombre de usuario no se verifica, devolverá {nombre de usuario: 'al menos 4 caracteres'} objeto {}
inválido tiene un campo que no pudo verificar booleantrue
Válido no tiene un campo que no pueda verificar booleanfalse
Verifique el campo especificado, pasarlo en la matriz y devuelva booleanfunction (matriz)-
Borrar la función de lista de errores de claro-
V-Vuerrify
Esta directiva valida los datos y establece un nombre de clase para el componente cuando el componente del formulario desencadena un evento de desenfoque (el valor predeterminado es .vuerify-inválido). Puede ser componentes nativos como la entrada, o puede ser un componente que ha sido encapsulado por sí mismo. Dos versiones están disponibles
Instalar
# Vue 1.xnpm v-vuerify -s# vue 2.0npm v-vuerify-next -s
uso
Importar Vue desde 'Vue'Import VuerifyDirective de' v-vuerify '// vue1.ximport vuerifyDirective de' v-vuerify-next '// vue2.0vue.use (vuerifyDirective) <input v-Model = "username" v-vuerify = "" username ""> <xinput: value.sync = "contraseña" "V-vuerify =" "username" "> <xinput: value.sync =" "" "V-vuerify =" "Username" "<xinput: value.sync =" v-vuerify = "'Password'"> </X-Input>
Parámetro
VerifyenvalidClass
El nombre de clase predeterminado es Vuerify-Invalid
<input v-Model = "UserName" V-Vuerify = "'UserName'" Vuerify-Invalid-Class = "Error">
Modificadores
padre
Si Vuerify está registrado con el componente principal, entonces debe especificar un padre para que la Directiva pueda obtener el correspondiente $ Vuerify del componente principal. Para más detalles, consulte la demostración
Eventos
vuerify-inválido
vuerify-valid
Github: https://github.com/qingwei-li/vuerrify