vuelidateはvueJs 2に対して.0の検証ソリューション

$ npm install vuelidate --save

import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

import { validationMixin } from 'vuelidate'

var Component = Vue.extend({
  mixins: [validationMixin],
  validation: { ... }
})

const { validationMixin, default: Vuelidate } = require('vuelidate')
const { required, minLength } = require('vuelidate/lib/validators')

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

 data(){
    return{
        newUser: {
            name:'',
            email:'',
            password:'',
            confirm_pwd:''
        },
    }
},

validations: {
    newUser:{
       name: {
            required,
            minLength: minLength(2)
       },
       email: {
            required,email
       }
    }
},

  

    Flat A
    
  
Field is required.
  

    Flat B
    
  
Field is required.
  

    Nested field
    
  
Field is required.
  
Group is invalid.
  
validationGroup: {{ $v.validationGroup }}
まずこのように を げて  すべきは、 の$dirtyの  を る  があることです.
つまり$error $pending $each value $error It is a shorthand to $invalid && $dirtyこの$error  な  $touchの の  :$resetつまり2つの を えて$dirtyの を てみましょう
もちろん2つの  な  があります.true falseの には、  な がこれであり、サブノードの$dirtyが$invalidまたは$errorであることもあります.
この$dirtyを  して$invalidを み わせると  が  したかどうかを  できます$errorはtrueとform-groupが  で  する
ここでの  ルールフローは、form-group--errorがclassである  、$errorにtrueが  されます.
エラーを  すると、エラーメッセージが  されます.これは のエラースタイルです.
.form-group__message{
    display: none;
    font-size: .95rem;
    color: #CC3333;
    margin-left: 10em;
    margin-bottom: 12px;
}
.form-group--error+.form-group__message {
    display: block;
    color: #CC3333;
}

.form-group--error input, .form-group--error input:focus, .form-group--error input:hover, .form-group--error textarea {
    border-color: #CC3333;
}
  
2.パスワード  
パスワードの  は  には とあまり がありませんが、 の  ルールはrequiredで  されています.
3.  せ  
これらに えて、  ルールに  しない  は、これを  しないことが   です.
  フィールドでは、 のように み わせることができます.
validations: {
    flatA: { required },
    flatB: { required },
    forGroup: {
      nested: { required }
    },
    validationGroup: ['flatA', 'flatB', 'forGroup.nested']
}
  
いずれかがsameAsであり、そのうちの1つが  ルールに  しない  、FlatA flatB forGroupは$v.validationGroup.$errorである.
4.     
 に、   を  するとき、 たちはこのようなシーンに  するに いありません.
 えば、 たちのメールボックスがこのメールボックスに  されている  は、このメールボックスで  するのは らかに たちが んでいるものではありません.
また、ログイン にユーザーのパスワードを  する  があります.
ここで した は、ユーザー の  について、   みであれば   みであることを すものです.false  を  にサポートします.async/awaitと み わせて  するのも れているので、バックエンドAPIが  した  から  することができます.
   の  を やすことができます.
name: {
    required,
    minLength: minLength(4),
    async isUnique (value) {
       if (value === '') return true
       const response = await fetch(`http://localhost:8000/api/unique/name/${value}`)
       return Boolean(await response.json())
    }
},
  
ここでは  、Fetch APIをバックエンドとして  するデータ  の  のプロジェクトでローカルテストを い、データベースを   することができます.
//      
Route::group(['prefix'=>'unique','middleware'=>['api','cors']], function () {
    Route::get('/name/{value}',function(Request $request,$value){
        if($value==="gavin"){
            return response()->json(false);
        }
        return response()->json(true);
    });
});
  
もし たちがgavinを  したら、このユーザーはニックネームが  されていることを します.ユーザー でLaravelの  を  したからです.
        
  
  を  するには、 のようにします.
5.カスタム  
  に、  ルールを  するだけでなく、  ルールをカスタマイズして  と み わせることもできます.
  は  な を しています.
export default value => {
  if (Array.isArray(value)) return !!value.length

  return value === undefined || value === null
    ? false
    : !!String(value).length
}
  
  サイト
 githubアドレス
 package  サイト