https://github.com/kockarevicivan/vue-val
NPM package repository for VueJS validation toolkit. Offers both custom and 'plug and play' validation.
https://github.com/kockarevicivan/vue-val
javascript nodejs validation validation-library vuejs
Last synced: about 2 months ago
JSON representation
NPM package repository for VueJS validation toolkit. Offers both custom and 'plug and play' validation.
- Host: GitHub
- URL: https://github.com/kockarevicivan/vue-val
- Owner: kockarevicivan
- License: mit
- Created: 2019-09-24T11:50:20.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T11:27:33.000Z (over 2 years ago)
- Last Synced: 2025-02-24T21:41:34.221Z (2 months ago)
- Topics: javascript, nodejs, validation, validation-library, vuejs
- Language: JavaScript
- Homepage:
- Size: 1.65 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-val
Validation toolkit for VueJS. Offers both manual and 'plug and play' validation.
## Usage
### Manual validation
First, import necessary validation methods into your component:
```
import { isEmail } from 'vue-val'
```
Then, on field change (or any other event you want to handle), call the proper validation method:
```
methods() {
...
onEmailChange(email) {
const validationResult = isEmail(email);
}
...
}
```
Validation result will be in the following format (validation indicator and error message):
```
{
valid: ,
message:
}
```
Here's a list of currently available validation methods:
```
required(value); // Checks whether passed variable contains a value.
notNull(value); // Checks whether passed variable is null.
maxValue(max)(value); // Checks whether passed value is lower than the passed maximum.
minValue(min)(value); // Checks whether passed value is greater than the passed minimum.
maxLength(max)(value); // Checks whether passed value's length is less than passed maximum.
minLength(min)(value); // Checks whether passed value's length is greater than passed minimum.
isValue(allowedValues)(value); // Checks whether passed value is one of the passed allowed values.
isEmail(value); // Checks whether passed value is a proper e-mail address.
isNumeric(value); // Checks whether passed value is numeric.
isTime(value); // Checks whether passed value is a valid date string (accepts '/', '-' and '.' delimiters).
isDate(value); // Checks whether passed value is a valid time string.
isUrl(value); // Checks whether passed value is a proper URL.
customRegex(value); // Checks whether value matches the provided regex.
```
### Integrated validation
Package can be used with its 'plug and play' validation. First, in the data section of your component, create a validation object for your form, in the following format:
```
data() {
return {
...
form: {
...
name: {
valid: false, // We suppose that field is initially invalid.
error: null, // We suppose that there is still no error message for this field.
constraints: [required, maxLenth(20)] // List of validation constraints, imported from the package
},
email: {
valid: false,
error: null,
constraints: [required, maxLenth(6), isEmail]
}
...
}
...
};
};
```
Second, import methods 'set' and 'validate' and put them in the data of the component (since package methods cannot be directly invoked from VueJS markup) like this:
```
import { set, validate } from 'vue-val';
data() {
return {
...
set, // Map 'set' to a local data property.
validate, // Map 'validate' to a local data property.
form: {
...
name: {
valid: false,
error: null,
constraints: [required, maxLenth(20)]
},
email: {
valid: false,
error: null,
constraints: [required, maxLenth(6), isEmail]
}
...
}
...
};
};
```
Third, use these methods inside your component:
```
Submit form
```
### Custom messages
You can also set custom error messages like this:
```
import { messages } from 'vue-val'
...
messages.required = () => `M8, field is required!`;
messages.maxLength = (maxCharacters) => `We don't allow more than ${maxCharacters} characters!!`;
```
Note that every message is defined as lambda expression. This is due to the messages that depend on one or more parameters (e.g. maximum number of characters).