vuelidation

KO | EN

gitlite — search

#machine-learning #typescript #hacktoberfest #python #docker #react-native #laravel #deep-learning #tensorflow #ios #javascript #github

★ 35 Open GitHub ↗

simple, powerful, vuejs validation.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center">Vuelidation ✅</h1>

<q>simple, powerful, vuejs validation.</q>

✨ <a href="https://codepen.io/cj/pen/BRNzgd">Example</a>✨

**Install**

`yarn add --dev vuelidation@latest`

**Include Plugin**
```javascript
import Vue from 'vue';
import Vuelidation from 'vuelidation';

Vue.use(Vuelidation);
```
**Use**
```vue
<script>
 new Vue({
 data () {
 return {
 name: '',
 }
 },
 
 vuelidation: {
 data: {
 name: {
 required: true,
 },
 },
 },
 
 methods: {
 submit () {
 if (this.$vuelidation.valid()) {
 console.log(`Hello, ${this.name}!`)
 }
 }
 }
 })
</script>

<template>
 <form>
 <input type='text' v-model='name' />
 <div v-if='$vuelidation.error("name")'>{{ $vuelidation.error('name') }}</div>
 
 <button type="submit" :disabled="$vuelidation.errors()">Submit</button>
 </form>
</template>
```

## Validations

<details>
<summary>
 <a href='#validations-alphabetic'>alphabetic</a>
 
 <ul style='margin: 0; padding: 0; list-style-type: none;'>
 <li>Must be a alphabetic value</li>
 <li>args: Boolean</li>
 </ul>
 
</summary>

```javascript
{
 alphabetic: true,
}
```
</details>

<details>
<summary>
 <a href='#validations-alpha'>alpha</a>
 
 <ul style='margin: 0; padding: 0; list-style-type: none;'>
 <li>Must only contain letters and numbers</li>
 <li>args: Boolean</li>
 </ul>
 
</summary>

```javascript
{
 alpha: true,
}
```
</details>

<details>
<summary>
 <a href='#validations-alphaDash'>alphaDash</a>
 
 <ul style='margin: 0; padding: 0; list-style-type: none;'>
 <li>msg: Must only contain letters, numbers, underscores or dashes</li>
 <li>arg: Boolean</li>
 </ul>
 
</summary>

```javascript
{
 alphaDash: true,
}
```
</details>

<details>
<summary>
 <a href='#validations-alphaSpace'>alphaSpace</a>
 
 <ul style='margin: 0; padding: 0; list-style-type: none;'>
 <li>msg: Must only contain letters, numbers or spaces</li>
 <li>arg: Boolean</li>
 </ul>
 
</summary>

```javascript
{
 alphaSpace: true,
}
```
</details>

<details>
<summary>
 <a href='#validations-length'>length</a>
 
 <ul style='margin: 0; padding: 0; list-style-type: none;'>
 <li>msg: Must be {{ length }} character(s)</li>
 <li>arg: Number</li>
 </ul>
 
</summary>

```javascript
{
 length: 16,
}
```
</details>

<details>
<summary>
 <a href='#validations-between'>between</a>
 
 <ul style='margin: 0; padding: 0; list-style-type: none;'>
 <li>msg: Must be between {{ min }} and {{ max }}</li>
 <li>arg: { min: Number, max: Number }</li>
 </ul>
 
</summary>

```javascript
{
 between: {
 min: 5,
 max: 10,
 },
}
```
</details>

<details>
<summary>
 <a href='#validations-between-length'>betweenLength</a>
 
 <ul style='margin: 0; padding: 0; list-style-type: none;'>
 <li>msg: Must have between {{ min }} and {{ max }} characters</li>
 <li>arg: { min: Number, max: Number }</li>
 </ul>
 
</summary>

```javascript
{
 betweenLength: {
 min: 8,
 max: 20,
 },
}
```
</details>

<details>
<summary>
 <a href='#validations-decimal'>decimal</a>
 
 <ul style='margin: 0; padding: 0; list-style-type: none;'>
 <li>msg: Must be a decimal<% if (points && points !== "*") { %> with {{ points }} points<% } %></li>
 <li>arg: { points: *Number }</li>
 </ul>
 
</summary>

```javascript
{
 decimal: {
 points: 2,
 },
}
```
</details>

<details>
<summary>
 <a href='#validations-email'>email</a>
 
 <ul style='margin: 0; padding: 0; list-style-type: none;'>
 <li>msg: Not a valid email</li>
 <li>arg: Boolean</li>
 </ul>
 
</summary>

```javascript
{
 email: true,
}
```
</details>

<details>
<summary> <a href='#validations-includes'>includes</a>
 
 <ul style='margin: 0; padding: 0; list-style-type: none;'>
 <li>msg: {{ value }} is not one of the following: {{ values.join(", ") }}</li>
 <li>arg: { includes: Array }</li>
 </ul>
 
</summary>

```javascript
{
 includes: ['foo', 'bar'],
}
```
</details>

<details>
<summary>
 <a href='#validations-numeric'>numeric</a>
 
 <ul style='margin: 0; padding: 0; list-style-type: none;'>
 <li>msg: Must be a numeric value</li>
 <li>arg: Boolean</li>
 </ul>
 
</summary>

```javascript
{
 numeric: true,
}
```
</details>

<details>
<summary>
 <a href='#validations-required'>required</a>
 
 <ul style='margin: 0; padding: 0; list-style-type: none;'>
 <li>msg: Required</li>
 <li>arg: Boolean</li>
 </ul>
 
</summary>

```javascript
{
 required: true,
}
```
</details>

* - the **arg** is optional.

vuelidation

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README