vue-joi-validation
A validation libraery for vuejs and ssr support which dosen't have any conlifct with nuxti18n and vue-i18n.
Schema-based validation for vuejs using joi.
Links
Features
- Model based
- Decoupled from templates
- Schema based
- Built upon Joi
- Minimalistic
- Support for collection validations
- Support for nested models
- Contextified validators
- Easy to use with custom validators (e.g. Moment.js)
- Support for function composition
- Validates different data sources: Vuex getters, computed values, etc.
Installation
yarn add vue-joi-validation
npm install vue-joi-validation --save
You can import the library and use as a Vue plugin to enable the functionality globally on all components containing validation configuration.
Vue
Custom Validation
For creating custom validation rules you have to folow Joi extend.
extend options for vue-joi-vallidation can be a Function, an Array of rule objects, or a rule object.
;;const options = extend: base: Joi name: 'string' language: justalpha: 'just alphabetic allowed ' rules: name: 'justalpha' { let regPattern = '^[a-zA-Z]*$'; if !regPattern return this; return value; // Everything is OK } ;Vue;
In Components
To use vue-joi-validation in components you have to provide a computed property with joiValidationSchemaObject
. The vue-joi-validation will automatically consider joivalidationSchemaObject keys as component data. This means that your validation schema is based on your component data keys.
{ return nationalId: '' name: '' lastName: '' birthDay: '' birthCountry: '' passportCountry: '' passportNumber: '' passportExpireDate: '' birthDate: '' birthYear: '' birthMonth: '' passportExpireYear: '' passportExpireMonth: '' passportExpireDay: '' ; } computed: { return this$joiobject nationalId : this$joiid name : this$joi lastName : this$joi birthDay : this$joi birthCountry : this$joi passportCountry : this$joi passportNumber : this$joi passportExpireDate : this$joi birthDate : this$joi birthYear : this$joi birthMonth : this$joi passportExpireYear : this$joi passportExpireMonth : this$joi passportExpireDay : this$joi ; }
Validation in Components
Whenever a data key which is declared in joiValidationSchemaObject
changes vue-joi-validation
validates it . You can get all validation errors in component using the joiValidationErrors
property.
In components joiValidate
is a function which performs validation programmatically,
- validate all schema
$ let validationResult = this.joiValidate()
- validate a key in data
$ let KeyNameValidationResult=this.joiValidate(keyName)
- All errors are availabe in template, you just have to check for the key that you want.
joiValidationErrors
properties are an array of Joi erros.
just use alphabetic this filed is required
or with has function
just use alphabetic this filed is required
Nuxt usage
/plugins/vue-joi-validation.js
;;const options={};Vue;
add to nuxt.config.js
// Plugins plugins: src: '~/plugins/vue-joi-validation'
For using Joi in server side or other purpose you can do more :
; Joi;const schema = a: Joi; const value = a: '123'; Joi;// err -> null// value.a -> 123 (number, not string)
Joi API
See the detailed API Reference.
all joies
Ioi extensions and useful libraries ==>joi-date-extensions joi-multiaddr joi-phone-number enjoi waterline-joi joi-currency-code joi18nz restify-joi-middleware joi-timezone joi-enums-extension joi-x-i18n vue-joi-validation