Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cj/vuelidation
simple, powerful, vuejs validation.
https://github.com/cj/vuelidation
form validation vue vuejs vuejs2
Last synced: 3 months ago
JSON representation
simple, powerful, vuejs validation.
- Host: GitHub
- URL: https://github.com/cj/vuelidation
- Owner: cj
- License: mit
- Created: 2017-04-21T17:12:04.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2019-03-26T02:42:08.000Z (almost 6 years ago)
- Last Synced: 2024-11-29T11:14:00.015Z (3 months ago)
- Topics: form, validation, vue, vuejs, vuejs2
- Language: JavaScript
- Size: 141 KB
- Stars: 36
- Watchers: 4
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
Vuelidation ✅
simple, powerful, vuejs validation.
✨ Example✨
**Install**
`yarn add --dev vuelidation@latest`
**Include Plugin**
```javascript
import Vue from 'vue';
import Vuelidation from 'vuelidation';
Vue.use(Vuelidation);
```
**Use**
```vue
new Vue({
data () {
return {
name: '',
}
},
vuelidation: {
data: {
name: {
required: true,
},
},
},
methods: {
submit () {
if (this.$vuelidation.valid()) {
console.log(`Hello, ${this.name}!`)
}
}
}
})
{{ $vuelidation.error('name') }}
Submit
```
## Validations
- Must be a alphabetic value
-
args: Boolean
```javascript
{
alphabetic: true,
}
```
- Must only contain letters and numbers
-
args: Boolean
```javascript
{
alpha: true,
}
```
-
msg: Must only contain letters, numbers, underscores or dashes -
arg: Boolean
```javascript
{
alphaDash: true,
}
```
-
msg: Must only contain letters, numbers or spaces -
arg: Boolean
```javascript
{
alphaSpace: true,
}
```
-
msg: Must be {{ length }} character(s) -
arg: Number
```javascript
{
length: 16,
}
```
-
msg: Must be between {{ min }} and {{ max }} -
arg: { min: Number, max: Number }
```javascript
{
between: {
min: 5,
max: 10,
},
}
```
-
msg: Must have between {{ min }} and {{ max }} characters -
arg: { min: Number, max: Number }
```javascript
{
betweenLength: {
min: 8,
max: 20,
},
}
```
-
msg: Must be a decimal<% if (points && points !== "*") { %> with {{ points }} points<% } %> -
arg: { points: *Number }
```javascript
{
decimal: {
points: 2,
},
}
```
-
msg: Not a valid email -
arg: Boolean
```javascript
{
email: true,
}
```
-
msg: {{ value }} is not one of the following: {{ values.join(", ") }} -
arg: { includes: Array }
```javascript
{
includes: ['foo', 'bar'],
}
```
-
msg: Must be a numeric value -
arg: Boolean
```javascript
{
numeric: true,
}
```
-
msg: Required -
arg: Boolean
```javascript
{
required: true,
}
```
* - the **arg** is optional.