Vuerify est un plug-in de vérification des données simple et léger. Règles de vérification de base intégrées et invites d'erreur. Des règles personnalisables et les types de règles prennent en charge les fonctions régulières, ou les chaînes. Les règles de vérification peuvent être enregistrées à l'échelle mondiale ou dans les composants. Le plug-in ajoutera $ vuerify objet à VM, et en même temps regarder les données et vérifier la légalité. S'il y a une erreur, Vm. $ Vuerify. $ Les erreurs seront stockées.
Installer
npm i vuerify -S
utiliser
Installer des plug-ins
Importer Vue à partir de 'Vue'Import Vuerify à partir de' Vuerify'vue.use (vuerify, / * Ajouter des règles personnalisées * /)
Ajouter des règles personnalisées
Le test peut être un régulier ou une fonction
{requis: {test: // s + $ /, message: 'requis'}}Inscrivez-vous dans les composants
{data () {nom d'utilisateur: '', mot de passe: ''}, Vuerify: {nom d'utilisateur: {test: // w {4,} /, // Règles personnalisées, qui peuvent être des fonctions, des règles d'enregistrement régulières ou globales (remplissage des chaînes) Message: 'Au moins 4 caractères'}, mot de passe: 'requis' // Règles pour l'utilisation d'enregistrement global}}API
$ Vuerify contient les propriétés suivantes
NAMPSIGNETYTYPEDEFAULT Valeur
$ erreurs Message d'erreur n'ayant pas vérifié les données, par exemple, si le nom d'utilisateur ne parvient pas, il renverra {nom d'utilisateur: 'au moins 4 caractères'} objet {}
invalid a un champ qui n'a pas vérifié le boolentrue
VALID n'a pas de champ qui ne vérifie pas Booleanfalse
Vérifiez le champ spécifié, passez-le dans le tableau et retournez booleanfunction (tableau) -
Effacer la fonction de liste d'erreur effacer-
V-Vuerrify
Cette directive valide les données et définit un nom de classe pour le composant lorsque le composant de formulaire déclenche un événement Blur (par défaut est .Vuerify-invalid). Il peut être des composants natifs tels que l'entrée, ou il peut être un composant qui a été encapsulé par lui-même. Deux versions sont disponibles
Installer
# Vue 1.xnpm v-vuerify -s # vue 2.0npm v-vuerify-next -s -s
usage
Importer Vue à partir de 'Vue'Import VuerifyDirective de' V-Vuerify '// Vue1.Ixt VuerifyDirective à partir de' V-Vuerify-Next '// Vue2.0Vue.use (VuerifyDirective) <Entrée V-Model = "Username" V-Vuerify = "' UserName" "> <x In-inut:" v-vuerify = "'mot de passe'"> </ x-enthousiasme>
Paramot
VerifyInvalidClass
Le nom de classe par défaut est Vuerify-invalid
<input v-model = "username" v-vuerify = "'username'" vuerify-invalid-class = "error">
Modificateurs
mère
Si Vuerify est enregistré auprès du composant parent, vous devez spécifier un parent afin que la directive puisse obtenir le $ Vuerify correspondant à partir du composant parent. Pour plus de détails, voir la démo
Événements
Vuerify-invalid
Vuerify-valide
Github: https://github.com/qingwei-li/vuerrify