This library is based on the "class-validator" library. It will help you easily validate your fields, forms and etc.. All you need to use is @PropertyValidator , @ErrorValidator, @ActionValidator decorators, and all decorators from “class validator” such as @Max, @IsEmail and etc..
Instalation
npm i validue
Demo
Go to the link bellow for watch demo
Example
Validation errors check automatically because Validue create a Vue Watcher for watching field editing. This example close to the real task, all you need to append for work it's a business logic in the SignUp method
<template>
<form>
<div class="text-field">
<label class="text-field__label" for="username"> Your username </label>
<input class="text-field__input" id="username" placeholder="Enter username">
<p class="text-field__error" v-if="usernameErrors.isNotEmpty || usernameErrors.length">
{{usernameErrors.isNotEmpty || usernameErrors.length}}
</p>
</div>
<div class="text-field">
<label class="text-field__label" for="email"> Your email </label>
<input class="text-field__input" id="email" placeholder="Enter email">
<p class="text-field__error" v-if="emailErrors.isNotEmpty || emailErrors.isEmail">
{{emailErrors.isNotEmpty || emailErrors.isEmail}}
</p>
</div>
<button @click="signUp"> Sign up </button>
</form>
</template>
<script lang="ts">
import {Component, Vue} from "vue-property-decorator";
import {ActionValidator, PropertyValidator, ErrorValidator, IsNotEmpty, IsEmail, Length} from "validue";
@Component({})
export default class App extends Vue {
@IsNotEmpty({message: "Required field"})
@Length(1, 10, {message: "Field more then 10 chars or less then 1 char"})
username = "";
@IsNotEmpty({message: "Required field"})
@IsEmail({}, {message: "Wrong email address"})
email = "";
@PropertyValidator("username")
usernameErrors = {};
@PropertyValidator("email")
emailErrors = {};
@ActionValidator()
signUp(@ErrorValidator errors: []){
if(errors.length){
console.log('U have some errors');
return;
}
//... your business logic
}
}
</script>Usage
@PropertyValidator has 3 override syntax:
PropertyValidator(path: string, validationFunctions?: Function[], options?: WatchOptions)
PropertyValidator(path: string, validationFunctions?:Function[])
PropertyValidator(path: string, options?: WatchOptions)
You need to add this decorator before the field, errors in which are written after validation. First argument is a field that is watched. It works like @Watch decorator in Vue. Second argument receives an array of validation functions. This argument is not required because you can use 2 methods to declare validation of your fields.
All decorators of "class-validator" in here
Example: 1 Way:
import {Component, Vue} from "vue-property-decorator";
import {ActionValidator, PropertyValidator,IsNotEmpty, IsEmail, Length} from "validue";
@Component({})
export default class App extends Vue {
@IsNotEmpty({message: "Required field"})
@Length(1, 10, {message: "Field more then 10 chars or less then 1 char"})
firstName = "";
@IsNotEmpty({message: "Required field"})
@IsEmail({}, {message: "Wrong email address"})
email = "";
@PropertyValidator("firstName")
firstNameErrors = {};
@PropertyValidator("email")
emailErrors = {};
}2 Way:
import {Component, Vue} from "vue-property-decorator";
import {ActionValidator, PropertyValidator,IsNotEmpty, IsEmail, Length} from "validue";
@Component({})
export default class App extends Vue {
firstName = "";
email = "";
@PropertyValidator("firstName", [
IsNotEmpty({message: "Required field"}),
Length(1, 10, {message: "Field more then 10 chars or less then 1 char"})
])
firstNameErrors = {};
@PropertyValidator("email", [
IsNotEmpty({message: "Required field"}),
IsEmail({}, {message: "Wrong email address"})
])
emailErrors = {};
}@ActionValidator(group?: string[])
This decorator is added before the method. Thus, before the method is called, all fields and field groups are validated, and returned errors are written in fields with @ProperyValidator added before. Example without group:
import {Component, Vue} from "vue-property-decorator";
import {ActionValidator, PropertyValidator,IsNotEmpty, IsEmail, Length} from "validue";
@Component({})
export default class App extends Vue {
@IsNotEmpty({message: "Required field"})
@Length(1, 10, {message: "Field more then 10 chars or less then 1 char"})
firstName = "";
@IsNotEmpty({message: "Required field"})
@IsEmail({}, {message: "Wrong email address"})
email = "";
@PropertyValidator("firstName")
firstNameErrors = {};
@PropertyValidator("email")
emailErrors = {};
@ActionValidator()
send(){
console.log(this.firstNameErrors, this.emailErrors);
}
} Example with group:
import {Component, Vue} from "vue-property-decorator";
import {ActionValidator, PropertyValidator, IsNotEmpty, IsEmail, Length} from "validue";
@Component({})
export default class App extends Vue {
@IsNotEmpty({message: "Required field",
groups: ['registration']})
@Length(1, 10, {message: "Field more then 10 chars or less then 1 char",
groups: ['registration']})
firstName = "";
@IsNotEmpty({message: "Required field",
groups: ['registration']})
@Length(1, 10, {message: "Field more then 10 chars or less then 1 char",
groups: ['registration']})
lastName = "";
@PropertyValidator("firstName")
firstNameErrors = {};
@PropertyValidator("lastName")
lastNameErrors = {};
@IsNotEmpty({message: "Required field",
groups: ['auth']})
@IsEmail({}, {message: "Wrong email address", groups: ['auth']})
email = "";
@IsNotEmpty({message: "Required field",
groups: ['auth']})
@IsEmail({}, {message: "Wrong email address", groups: ['auth']})
password = "";
@PropertyValidator("email")
emailErrors = {};
@PropertyValidator("password")
passwordErrors = {};
@ActionValidator(['registration'])
register(){
//Will validate fields which have group 'registration'
}
@ActionValidator(['auth'])
auth(){
//Will validate fields which have group 'auth'
}
} All decorators of "class-validator" in here
Example: 1 Way:
import {Component, Vue} from "vue-property-decorator";
import {ActionValidator, PropertyValidator, IsNotEmpty, IsEmail, Length} from "validue";
@Component({})
export default class App extends Vue {
@IsNotEmpty({message: "Required field"})
@Length(1, 10, {message: "Field more then 10 chars or less then 1 char"})
firstName = "";
@IsNotEmpty({message: "Required field"})
@IsEmail({}, {message: "Wrong email address"})
email = "";
@PropertyValidator("firstName")
firstNameErrors = {};
@PropertyValidator("email")
emailErrors = {};
}2 Way:
import {Component, Vue} from "vue-property-decorator";
import {ActionValidator, PropertyValidator, IsNotEmpty, IsEmail, Length} from "validue";
@Component({})
export default class App extends Vue {
firstName = "";
email = "";
@PropertyValidator("firstName", [
IsNotEmpty({message: "Required field"}),
Length(1, 10, {message: "Field more then 10 chars or less then 1 char"})
])
firstNameErrors = {};
@PropertyValidator("email", [
IsNotEmpty({message: "Required field"}),
IsEmail({}, {message: "Wrong email address"})
])
emailErrors = {};
}@ActionValidator(group?: string[])
This decorator is added before the method. Thus, before the method is called, all fields and field groups are validated, and returned errors are written in fields with @ProperyValidator added before. Example without group:
import {Component, Vue} from "vue-property-decorator";
import {ActionValidator, PropertyValidator, IsNotEmpty, IsEmail, Length} from "validue";
@Component({})
export default class App extends Vue {
@IsNotEmpty({message: "Required field"})
@Length(1, 10, {message: "Field more then 10 chars or less then 1 char"})
firstName = "";
@IsNotEmpty({message: "Required field"})
@IsEmail({}, {message: "Wrong email address"})
email = "";
@PropertyValidator("firstName")
firstNameErrors = {};
@PropertyValidator("email")
emailErrors = {};
@ActionValidator()
send(){
console.log(this.firstNameErrors, this.emailErrors);
}
} Example with group:
import {Component, Vue} from "vue-property-decorator";
import {ActionValidator, PropertyValidator, IsNotEmpty, IsEmail, Length} from "validue";
@Component({})
export default class App extends Vue {
@IsNotEmpty({message: "Required field",
groups: ['registration']})
@Length(1, 10, {message: "Field more then 10 chars or less then 1 char",
groups: ['registration']})
firstName = "";
@IsNotEmpty({message: "Required field",
groups: ['registration']})
@Length(1, 10, {message: "Field more then 10 chars or less then 1 char",
groups: ['registration']})
lastName = "";
@PropertyValidator("firstName")
firstNameErrors = {};
@PropertyValidator("lastName")
lastNameErrors = {};
@IsNotEmpty({message: "Required field",
groups: ['auth']})
@IsEmail({}, {message: "Wrong email address", groups: ['auth']})
email = "";
@IsNotEmpty({message: "Required field",
groups: ['auth']})
@IsEmail({}, {message: "Wrong email address", groups: ['auth']})
password = "";
@PropertyValidator("email")
emailErrors = {};
@PropertyValidator("password")
passwordErrors = {};
@ActionValidator(['registration'])
register(){
//Will validate fields which have group 'registration'
}
@ActionValidator(['auth'])
auth(){
//Will validate fields which have group 'auth'
}
} @ErrorValidator paramName
This decorator is added in method's param and after call the method in this variable will write all need errors ('need' cuz u can use Groups, see upper)
import {Component, Vue} from "vue-property-decorator";
import {ActionValidator, PropertyValidator, IsNotEmpty, IsEmail, Length} from "validue";
import {ErrorValidator} from './validue-decorators';
@Component({})
export default class App extends Vue {
@IsNotEmpty({message: "Required field"})
@Length(1, 10, {message: "Field more then 10 chars or less then 1 char"})
firstName = "";
@IsNotEmpty({message: "Required field"})
@IsEmail({}, {message: "Wrong email address"})
email = "";
@PropertyValidator("firstName")
firstNameErrors = {};
@PropertyValidator("email")
emailErrors = {};
@ActionValidator()
send(@ErrorValidator errors) {
console.log(errors) // errors = [ {firstNameErrors: {...errors-here...}}, {emailErrors: {...errors-here...}}]
}
}