1. js-validation-serjik
this is library for validation js and you can use it in vue js :)
js-validation-serjik
Package: js-validation-serjik
Created by: AliGhaleyan
Last modified: Fri, 06 May 2022 19:46:48 GMT
Version: 6.5.2
License: ISC
Downloads: 4
Repository: https://github.com/AliGhaleyan/JS-Validation

Install

npm install js-validation-serjik
yarn add js-validation-serjik

# JS Validation!
import in component

 import Validation from 'js-validation-serjik'  

single mode

use :

 let data = 'input text';  
let rule = 'string|min:10'; 
let label = "label";
  
Validation.validate(data, rule, label,true);  

Note: label can be false, and if it has string value show it in error message

result :

 {  
    errors: {  
       errors: ['message number one', 'message number tow'],  
    },  
    fails: true  // boolean = if has error is true else is false  
}  

Note: if the action has validation error fails property is true and if does not has it is false

group mode

use:

 let data = {  
   name: 'john',  
   last_name: 'doe',  
   age: 17,  
};
  
let rules = {  
   name: 'string|max:20',  
   age: 'integer',  
}; 
 
let labels = {
	name: 'your name',
	last_name: 'your last name',
	age; 'your age'
};
  
Validation.validate(data, rules, labels);  

result :

 {  
    errors: {  
       field_name: ['message number one', 'message number tow'],  
       age: ['must be integer'],   
       // ...  
    },  
    fails: true  // boolean = if has error is true else is false  
}  

Rules :

Note; when use rules must be split with | like this, 'rule1|rule2|rule3...'

title description use
string check the value is string string
integer check the value is number integer
min check value length lower than this min:{number} like this min:25
max check value length bigger than this max:{number} like this max:50
required check value exist and unequal with null required
in check value is in a array in:1,2,3,4,... these numbers is your array indexes
start with check value started by this start_with:{letter} like this start_with:a
persian alpha check words are persian alpha persian
english alpha check words are english alpha english
email check email format email
phone check phone number phone
boolean check value is bool boolean check is true , false , 0 or 1
url check value is current url address url check is current target
confirm check is equal with passed value confirm:{equal value} you can pass variable of component

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin