<commit_before>---
date: '2018-02-26 16:30 +0100'
published: true
title: VeeValidate
---

## Vad är VeeValidate

Det här är ett plugin för Vue.js som låter dig validera inmatningsfält och visa fel på ett enkelt och kraftfullt sätt.

Du behöver inte göra något spacifikt i din app. Det mesta av arbetet är ren html. Du behöver bara ange, för varje input, vilken typ av validatorer som ska användas när värdet ändras. Du får då information om felen för varje fält.

Även om de flesta av valideringarna sker automatiskt så kan du använda valideraren så som passar dig. Valideringsobjektet har inga beroenden och är ett fristående objekt.

För närvarande finns över 20 valideringsregler tillgängliga i plugin.

## Komma igång

### Installation

Du kan installera det här pluginet via npm eller via en CDN.

**npm**
```bash
npm install vee-validate --save
```

**CDN**
```hmtl
 <!-- jsdelivr cdn -->
  <script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>

  <!-- unpkg -->
  <script src="https://unpkg.com/vee-validate@2.0.0-rc.7"></script>
```

### Usage

```html
<script src="path/to/vue.js"></script>
<script src="path/to/vee-validate.js"></script>
<script>
  Vue.use(VeeValidate); // good to go.
</script>
```


eller så kan du importera med hjälp av ES6:

```js
import Vue from 'vue';
import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);
```

## Grundläggande exempel


Allt du behöver är att lägga till `v-validate` direktivet till inmatningen du vill validera. Sedan vidarebefordra till direktivet en reglersträng som innehåller en lista över valideringsregler separerade av ett rör `|`.

Använd `required` för att ange att fältet är obligatoriskt och `email` för att ange att fältet måste vara ett e-postmeddelande.

För att kombinera båda reglerna tilldelar vi strängvärdet `required|email` till v-validate uttrycksvärdet.

**html**
```html
<div class="columns is-multiline">
    <div class="column is-12">
        <label class="label">Email (1s delay)</label>
        <p class="control has-icon has-icon-right">
            <input name="email" v-validate="'required|email'" data-vv-delay="1000" :class="{'input': true, 'is-danger': errors.has('email') }" type="text" placeholder="Email">
            <i v-show="errors.has('email')" class="fa fa-warning"></i>
            <span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>
        </p>
    </div>
    <div class="column is-12">
        <label class="label">Name (0.5s delay)</label>
        <p class="control has-icon has-icon-right">
            <input name="name" v-validate="'required|alpha'" data-vv-delay="500" :class="{'input': true, 'is-danger': errors.has('name') }" type="text" placeholder="Name">
            <i v-show="errors.has('name')" class="fa fa-warning"></i>
            <span v-show="errors.has('name')" class="help is-danger">{{ errors.first('name') }}</span>
        </p>
    </div>
</div>
```

## Försenad validering (debounced)

I ett scenario där du vill vänta på att användaren slutar skriva och sedan validera fältet. Detta kan uppnås genom att lägga till ett `data-vv-delay` attribut på fältet som valideras och tilldela det antal millisekunder du vill vänta på.

**html**
```html
<div class="columns is-multiline">
    <div class="column is-12">
        <label class="label">Email (1s delay)</label>
        <p class="control has-icon has-icon-right">
            <input name="email" v-validate="'required|email'" data-vv-delay="1000" :class="{'input': true, 'is-danger': errors.has('email') }" type="text" placeholder="Email">
            <i v-show="errors.has('email')" class="fa fa-warning"></i>
            <span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>
        </p>
    </div>
    <div class="column is-12">
        <label class="label">Name (0.5s delay)</label>
        <p class="control has-icon has-icon-right">
            <input name="name" v-validate="'required|alpha'" data-vv-delay="500" :class="{'input': true, 'is-danger': errors.has('name') }" type="text" placeholder="Name">
            <i v-show="errors.has('name')" class="fa fa-warning"></i>
            <span v-show="errors.has('name')" class="help is-danger">{{ errors.first('name') }}</span>
        </p>
    </div>
</div>
```

## Models Validering

`v-validate` direktivet detekterar om input har v-model bunden till samma input, och tittar på det värdet och validerar det när det ändras. Men det kan också lyssna på förändringar i computed attribut genom att använda `arg` så här:

```html
<input v-validate:name="'required|alpha_spaces'" type="text" name="name">
```

```js
export default {
  data: () => ({
    first_name: '',
    last_name: ''
  }),
  computed: {
    name() {
      return this.first_name + ' ' + this.last_name;
    }
  }
};
```

**Uttrycket för både arg och  v-model direktivet måste vara ett enkelt pricknotationsuttryck, och uttrycket måste existera på förekomsten. Om du till exempel har inputs i en slinga som är bunden av iteratorn, fungerar det inte korrekt och används istället de traditionella lyssnare.**

Som du kan se är arg name som säger `v-validate` att titta på när namnet ändras.

**Du kan debounce validering med `lazy` modifierare på ditt v-model direktiv, vilket gör att valideringen endast ska ske när användaren lämnar inmatningen.**

## Initial Value Validation


## Tillgängliga regler

|:------------- |:-------------:| -----:|
|after|alpha|alpha|
|_dash|alpha_num|alpha_spaces|
|before|between|confirmed|
|credit_card|date_between|date_format|
|decimal|digits|dimensions|
|email|ext|image|
|in|ip|max|
|max_value|mimes|min|
|min_value|not_in|numeric|
|regex|required|size|
|url<commit_msg>Create 2018-02-26-veevalidate.md<commit_after>---
date: '2018-02-26 16:30 +0100'
published: true
title: VeeValidate
---

## Vad är VeeValidate

Det här är ett plugin för Vue.js som låter dig validera inmatningsfält och visa fel på ett enkelt och kraftfullt sätt.

Du behöver inte göra något spacifikt i din app. Det mesta av arbetet är ren html. Du behöver bara ange, för varje input, vilken typ av validatorer som ska användas när värdet ändras. Du får då information om felen för varje fält.

Även om de flesta av valideringarna sker automatiskt så kan du använda valideraren så som passar dig. Valideringsobjektet har inga beroenden och är ett fristående objekt.

För närvarande finns över 20 valideringsregler tillgängliga i plugin.

## Komma igång

### Installation

Du kan installera det här pluginet via npm eller via en CDN.

**npm**
```bash
npm install vee-validate --save
```

**CDN**
```hmtl
 <!-- jsdelivr cdn -->
  <script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>

  <!-- unpkg -->
  <script src="https://unpkg.com/vee-validate@2.0.0-rc.7"></script>
```

### Usage

```html
<script src="path/to/vue.js"></script>
<script src="path/to/vee-validate.js"></script>
<script>
  Vue.use(VeeValidate); // good to go.
</script>
```


eller så kan du importera med hjälp av ES6:

```js
import Vue from 'vue';
import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);
```

## Grundläggande exempel


Allt du behöver är att lägga till `v-validate` direktivet till inmatningen du vill validera. Sedan vidarebefordra till direktivet en reglersträng som innehåller en lista över valideringsregler separerade av ett rör `|`.

Använd `required` för att ange att fältet är obligatoriskt och `email` för att ange att fältet måste vara ett e-postmeddelande.

För att kombinera båda reglerna tilldelar vi strängvärdet `required|email` till v-validate uttrycksvärdet.

**html**
```html
<div class="columns is-multiline">
    <div class="column is-12">
        <label class="label">Email (1s delay)</label>
        <p class="control has-icon has-icon-right">
            <input name="email" v-validate="'required|email'" data-vv-delay="1000" :class="{'input': true, 'is-danger': errors.has('email') }" type="text" placeholder="Email">
            <i v-show="errors.has('email')" class="fa fa-warning"></i>
            <span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>
        </p>
    </div>
    <div class="column is-12">
        <label class="label">Name (0.5s delay)</label>
        <p class="control has-icon has-icon-right">
            <input name="name" v-validate="'required|alpha'" data-vv-delay="500" :class="{'input': true, 'is-danger': errors.has('name') }" type="text" placeholder="Name">
            <i v-show="errors.has('name')" class="fa fa-warning"></i>
            <span v-show="errors.has('name')" class="help is-danger">{{ errors.first('name') }}</span>
        </p>
    </div>
</div>
```

## Försenad validering (debounced)

I ett scenario där du vill vänta på att användaren slutar skriva och sedan validera fältet. Detta kan uppnås genom att lägga till ett `data-vv-delay` attribut på fältet som valideras och tilldela det antal millisekunder du vill vänta på.

**html**
```html
<input name="email" v-validate="'required|email'" data-vv-delay="1000" :class="{'input': true, 'is-danger': errors.has('email') }" type="text" placeholder="Email">
```

## Models Validering

`v-validate` direktivet detekterar om input har v-model bunden till samma input, och tittar på det värdet och validerar det när det ändras. Men det kan också lyssna på förändringar i computed attribut genom att använda `arg` så här:

```html
<input v-validate:name="'required|alpha_spaces'" type="text" name="name">
```

```js
export default {
  data: () => ({
    first_name: '',
    last_name: ''
  }),
  computed: {
    name() {
      return this.first_name + ' ' + this.last_name;
    }
  }
};
```

**Uttrycket för både arg och  v-model direktivet måste vara ett enkelt pricknotationsuttryck, och uttrycket måste existera på förekomsten. Om du till exempel har inputs i en slinga som är bunden av iteratorn, fungerar det inte korrekt och används istället de traditionella lyssnare.**

Som du kan se är arg name som säger `v-validate` att titta på när namnet ändras.

**Du kan debounce validering med `lazy` modifierare på ditt v-model direktiv, vilket gör att valideringen endast ska ske när användaren lämnar inmatningen.**

## Initial Value Validation


## Tillgängliga regler

|:------------- |:-------------:| -----:|
|after|alpha|alpha|
|_dash|alpha_num|alpha_spaces|
|before|between|confirmed|
|credit_card|date_between|date_format|
|decimal|digits|dimensions|
|email|ext|image|
|in|ip|max|
|max_value|mimes|min|
|min_value|not_in|numeric|
|regex|required|size|
|url
{'fraction_non_alphanumeric': 0.1502125649504015, 'fraction_numerical': 0.00944733112895607, 'mean_word_length': 3.9722874589008925, 'pattern_counts': {'":': 0, '<': 102, '<?xml version=': 0, '>': 104, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6252373', 'n_tokens_mistral': 3809, 'n_tokens_neox': 3655, 'n_words': 1086}