{"id":13623460,"url":"https://github.com/sployad/validue","last_synced_at":"2025-04-15T14:33:12.598Z","repository":{"id":41758938,"uuid":"221249903","full_name":"sployad/validue","owner":"sployad","description":"This library based on \"class-validator\" , it will help to easy you validate your fields, forms and etc. All you need to use decorators @PropertyValidate, @ActionValidate and all decorators from \"class-validator\" like @Max, @IsEmail and more...","archived":false,"fork":false,"pushed_at":"2023-01-11T22:28:07.000Z","size":2229,"stargazers_count":6,"open_issues_count":36,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-29T03:02:56.108Z","etag":null,"topics":["class-validator","decorators","typescript","validate-js","validation","validation-library","vue","vue-typescript","vuejs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sployad.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-12T15:27:15.000Z","updated_at":"2024-04-15T06:53:34.000Z","dependencies_parsed_at":"2023-02-09T08:31:48.799Z","dependency_job_id":null,"html_url":"https://github.com/sployad/validue","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sployad%2Fvalidue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sployad%2Fvalidue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sployad%2Fvalidue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sployad%2Fvalidue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sployad","download_url":"https://codeload.github.com/sployad/validue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223639273,"owners_count":17177803,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["class-validator","decorators","typescript","validate-js","validation","validation-library","vue","vue-typescript","vuejs"],"created_at":"2024-08-01T21:01:32.054Z","updated_at":"2024-11-08T11:30:52.868Z","avatar_url":"https://github.com/sployad.png","language":"TypeScript","readme":"# ![enter image description here](https://github.com/sployad/validue/blob/master/example/src/assets/logo.png?raw=true)\n\nThis library is based on the \"[class-validator](https://github.com/typestack/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..\n\n# Instalation\n\n    npm i validue\n\n\n# Demo\nGo to the link bellow for watch demo\n\n\u003e [Link demo on the codesandbox](https://codesandbox.io/s/headless-wave-1ri0c?file=/src/App.vue)\n\n# Example\n\nValidation errors check automatically because Validue create a Vue Watcher for watching field editing. This\nexample close to the real task, all you need to append for work it's a business logic in the SignUp method\n\n```vue\n\u003ctemplate\u003e\n  \u003cform\u003e\n    \u003cdiv class=\"text-field\"\u003e\n      \u003clabel class=\"text-field__label\" for=\"username\"\u003e Your username \u003c/label\u003e\n      \u003cinput class=\"text-field__input\" id=\"username\" placeholder=\"Enter username\"\u003e\n      \u003cp class=\"text-field__error\" v-if=\"usernameErrors.isNotEmpty || usernameErrors.length\"\u003e\n        {{usernameErrors.isNotEmpty || usernameErrors.length}} \n      \u003c/p\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"text-field\"\u003e\n      \u003clabel class=\"text-field__label\" for=\"email\"\u003e Your email \u003c/label\u003e\n      \u003cinput class=\"text-field__input\" id=\"email\" placeholder=\"Enter email\"\u003e\n      \u003cp class=\"text-field__error\" v-if=\"emailErrors.isNotEmpty || emailErrors.isEmail\"\u003e\n        {{emailErrors.isNotEmpty || emailErrors.isEmail}}\n      \u003c/p\u003e\n    \u003c/div\u003e\n    \u003cbutton @click=\"signUp\"\u003e Sign up \u003c/button\u003e\n  \u003c/form\u003e\n\u003c/template\u003e\n\u003cscript lang=\"ts\"\u003e\nimport {Component, Vue} from \"vue-property-decorator\";\nimport {ActionValidator, PropertyValidator, ErrorValidator, IsNotEmpty, IsEmail, Length} from \"validue\";\n\n@Component({})\nexport default class App extends Vue {\n\n  @IsNotEmpty({message: \"Required field\"})\n  @Length(1, 10, {message: \"Field more then 10 chars or less then 1 char\"})\n  username = \"\";\n\n  @IsNotEmpty({message: \"Required field\"})\n  @IsEmail({}, {message: \"Wrong email address\"})\n  email = \"\";\n\n  @PropertyValidator(\"username\")\n  usernameErrors = {};\n\n  @PropertyValidator(\"email\")\n  emailErrors = {};\n  \n  @ActionValidator()\n  signUp(@ErrorValidator errors: []){\n    if(errors.length){\n      console.log('U have some errors');\n      return;\n    }\n    //... your business logic\n  }\n}\n\u003c/script\u003e\n```\n\n## Usage\n### @PropertyValidator has 3 override syntax:\n#### PropertyValidator(path: string, validationFunctions?: Function[], options?: WatchOptions)\n#### PropertyValidator(path: string, validationFunctions?:Function[])\n#### PropertyValidator(path: string, options?: WatchOptions)\n\n\nYou 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.\n\n\u003e All decorators of \"class-validator\" in  [here](https://github.com/typestack/class-validator#validation-decorators)\n\nExample:\n1 Way:\n```typescript\n    import {Component, Vue} from \"vue-property-decorator\";    \n    import {ActionValidator, PropertyValidator,IsNotEmpty, IsEmail, Length} from \"validue\";  \n      \n    @Component({})  \n    export default class App extends Vue {  \n      \n\t    @IsNotEmpty({message: \"Required field\"})  \n\t    @Length(1, 10, {message: \"Field more then 10 chars or less then 1 char\"})  \n\t    firstName = \"\";  \n  \n\t    @IsNotEmpty({message: \"Required field\"})  \n\t    @IsEmail({}, {message: \"Wrong email address\"})  \n\t    email = \"\";  \n  \n\t    @PropertyValidator(\"firstName\")  \n\t    firstNameErrors = {};  \n  \n\t    @PropertyValidator(\"email\")  \n\t    emailErrors = {};  \n    }\n```\n\n2 Way:\n\n ```typescript\t\n   \n    import {Component, Vue} from \"vue-property-decorator\";  \n    import {ActionValidator, PropertyValidator,IsNotEmpty, IsEmail, Length} from \"validue\";  \n      \n    @Component({})  \n    export default class App extends Vue {  \n      \n        firstName = \"\";  \n        email = \"\";  \n      \n        @PropertyValidator(\"firstName\", [  \n            IsNotEmpty({message: \"Required field\"}),  \n            Length(1, 10, {message: \"Field more then 10 chars or less then 1 char\"})  \n        ])  \n        firstNameErrors = {};  \n      \n        @PropertyValidator(\"email\", [  \n            IsNotEmpty({message: \"Required field\"}),  \n            IsEmail({}, {message: \"Wrong email address\"})  \n        ])  \n        emailErrors = {};  \n    }\n```\n\n### @ActionValidator(group?: string[])\nThis 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.\nExample without group:\n```typescript\n    import {Component, Vue} from \"vue-property-decorator\";   \n    import {ActionValidator, PropertyValidator, IsNotEmpty, IsEmail, Length} from \"validue\";  \n      \n    @Component({})  \n    export default class App extends Vue {  \n      \n        @IsNotEmpty({message: \"Required field\"})  \n        @Length(1, 10, {message: \"Field more then 10 chars or less then 1 char\"})  \n        firstName = \"\";  \n      \n        @IsNotEmpty({message: \"Required field\"})  \n        @IsEmail({}, {message: \"Wrong email address\"})  \n        email = \"\";  \n      \n        @PropertyValidator(\"firstName\")  \n        firstNameErrors = {};  \n      \n        @PropertyValidator(\"email\")  \n        emailErrors = {};  \n      \n        @ActionValidator()  \n        send(){  \n            console.log(this.firstNameErrors, this.emailErrors);  \n        }  \n    } \n```\n\nExample with group:\n```typescript\n    import {Component, Vue} from \"vue-property-decorator\";\nimport {ActionValidator, PropertyValidator, IsNotEmpty, IsEmail, Length} from \"validue\";\n\n@Component({})\nexport default class App extends Vue {\n\n    @IsNotEmpty({message: \"Required field\",\n        groups: ['registration']})\n    @Length(1, 10, {message: \"Field more then 10 chars or less then 1 char\",\n        groups: ['registration']})\n    firstName = \"\";\n\n    @IsNotEmpty({message: \"Required field\",\n        groups: ['registration']})\n    @Length(1, 10, {message: \"Field more then 10 chars or less then 1 char\",\n        groups: ['registration']})\n    lastName = \"\";\n\n    @PropertyValidator(\"firstName\")\n    firstNameErrors = {};\n\n    @PropertyValidator(\"lastName\")\n    lastNameErrors = {};\n\n    @IsNotEmpty({message: \"Required field\",\n        groups: ['auth']})\n    @IsEmail({}, {message: \"Wrong email address\", groups: ['auth']})\n    email = \"\";\n\n    @IsNotEmpty({message: \"Required field\",\n        groups: ['auth']})\n    @IsEmail({}, {message: \"Wrong email address\", groups: ['auth']})\n    password = \"\";\n\n    @PropertyValidator(\"email\")\n    emailErrors = {};\n\n    @PropertyValidator(\"password\")\n    passwordErrors = {};\n\n    @ActionValidator(['registration'])\n    register(){\n        //Will validate fields which have group 'registration'  \n    }\n\n    @ActionValidator(['auth'])\n    auth(){\n        //Will validate fields which have group 'auth'  \n    }\n} \n```\n\n### @ErrorValidator paramName\nThis 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)\n\n```typescript\nimport {Component, Vue} from \"vue-property-decorator\";\nimport {ActionValidator, PropertyValidator, IsNotEmpty, IsEmail, Length} from \"validue\";\nimport {ErrorValidator} from './validue-decorators';\n\n@Component({})\nexport default class App extends Vue {\n\n    @IsNotEmpty({message: \"Required field\"})\n    @Length(1, 10, {message: \"Field more then 10 chars or less then 1 char\"})\n    firstName = \"\";\n\n    @IsNotEmpty({message: \"Required field\"})\n    @IsEmail({}, {message: \"Wrong email address\"})\n    email = \"\";\n\n    @PropertyValidator(\"firstName\")\n    firstNameErrors = {};\n\n    @PropertyValidator(\"email\")\n    emailErrors = {};\n\n    @ActionValidator()\n    send(@ErrorValidator errors) {\n        console.log(errors) // errors = [ {firstNameErrors: {...errors-here...}}, {emailErrors: {...errors-here...}}]\n    }\n} \n```\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsployad%2Fvalidue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsployad%2Fvalidue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsployad%2Fvalidue/lists"}