---
tags: 筆記
---
# [筆記] Vuelidation
# 語法
## 1. SameAS

validations: {
    captchaCode: {
      required,
      sameAsRandomCode: sameAs(function () { return this.randomCaptcha })
    },
    passwordConfirm: {
      required,
      alphaNum,
      minLength: minLength(6),
      maxLength: maxLength(30),
      sameAsPassword: sameAs('password')
    }
}

# 安裝

npm install vuelidate --save

# 用法
[用法說明](https://vuelidate.js.org/#sub-basic-usage)

import { required, minLength, between } from 'vuelidate/lib/validators'

export default {
  data() {
    return {
      name: '',
      age: 0
    }
  },
  validations: {
    name: {
      required,
      minLength: minLength(4)
    },
    age: {
      between: between(20, 30)
    }
  }
}

div
  .form-group(:class="{ 'form-group--error': $v.name.$error }")
    label.form__label Name
    input.form__input(v-model.trim="$v.name.$model")
  .error(v-if="!$v.name.required") Field is required
  .error(v-if="!$v.name.minLength")
    | Name must have at least {{$v.name.$params.minLength.min}} letters.
  tree-view(:data="$v.name", :options="{rootObjectKey: '$v.name', maxDepth: 2}")

  .form-group(:class="{ 'form-group--error': $v.age.$error }")
    label.form__label Age
    input.form__input(v-model.trim.lazy="$v.age.$model")
  .error(v-if="!$v.age.between")
    | Must be between {{$v.age.$params.between.min}} and {{$v.age.$params.between.max}}

  span(tabindex="0") Blur to see changes
  tree-view(:data="$v.age", :options="{rootObjectKey: '$v.age', maxDepth: 2}")