?? ??? ??? ? ???? ????? Vuelidate? ???? ????? ??????. Vuelidate? ??? ? ?? ??? ???? ???? ????? ???? ??????. ? ????? ???? ?????. ?? ??? ?? ??? ? ????. ?? ??? ???? ???? ?? ??? ?? ??? ???? ?????.

? ?? ??? ??? ???? ?? ??? ?????? ???? ?? ? ??? ?? ?????. ??? ?? ??? ?? ??? ????? ???? ??? ????.

?? ? : ??? ?? ???

Vuelidate? ??? ?????. ??? ??? ??? ??? ????? validations ??? ?????. ?? ? :

 ??? : {
  ??: ''
},
?? : {
  ??: {
    ???
  }
}

Vue Devtools? ??? ?? ??? ?? ? $v ? ?????. ?? ??? ???? ? ?? ?? : $v ? ?? ? ?? ???? ??? ??????. ?? ? ??? ????? : ?? ?? ?? ? ?? ? ??. ? ??? ?? ? ?? ?? ?? ?? ?? ??? ??? ? ? ????.

?? ??? ?? ? ? ??? ??????. $dirty ??? ?? ????? ??? ?????. $model ?? ?? ?? ?????. $error ? $invalid ?? ??? ????? ( $invalid ? $dirty ???? $error ??).

Vuelidate ?? ? ??? ?? ??? ?????

???? ?? ??? ???. VuelIdate? ???? required ? minLength ?? ??? ???????.

?? Vuelidate? ??????.

 ??? vuelidate? ?????

???? main.js ????????.

 'vue'?? vue ?? ??;
"Vuelidate"?? Vuelidate? ?????.
'./app.vue'?? ? ?? ??;
'./store'?? ?? ?? ??;

vue.use (Vuelidate);
vue.config.productiontip = false

??? vue ({
 ??,
 ?? : H => H (?)
}). $ mount ( '#app')

?? ???? ??? ??? ?? ?? :

 'Vuelidate/lib/Validators'?? {??, minlength} ?? ??

??? ???? ?? ?? ??? ???? ???????.

 'Vuelidate/lib/Validators'?? {??, minlength} ?? ??

???? ??? {
 ??? () {
   ?? {
     ?? ?? : {
       ??: '',
     }
   }
 },
 ?? : {
   ?? ?? : {
     ??: {
       ???,
       Minlength : Minlength (2)
     },
   }
 }
}

????? ??? ??? ? ?? ?? ???? ?? v-model ? ?? $v ??????.

<template>
  <div>
    <label for="fname">??*</label>
    <input type="text" v-model="$v.formResponses.name.$model" id="fname">
    <p class="error" v-if="!$v.formResponses.name.required">? ??? ?????</p>
    <p class="error" v-if="!$v.formResponses.name.minLength">???? {{$ v.formresponses.name. $ params.minlength.min}}}}}}}}}.</p>
  </div>
</template>

<style scoped>
.error {
  color: red;
}
</style>

v-model.lazy ? ??? ?? ??

? ???? ??? ??? ?? v-model.lazy ???? ??? ??? ?? ?? ? ????? ??? ??????.

<input type="text" v-model.lazy="$v.formResponses.name.$model" id="fname">

??? ??? ??? ??

Vuelidate? ???? ??? ?? ??? ???? ?? ? ? ????. ??? ????? ?? ??? ???? ?? ??? ?? sameAs ? ?????.

???? ???? ?? ?? :

 ??? () {
  ?? {
    ?? ?? : {
      ?? : Null,
      ??? : NULL,
      password1 : null,
      password2 : null
    }
  };
},

Custom strongPassword ??? ??? ?? :

 ?? : {
  ?? ?? : {
    password1 : {
      ???,
      strongpassword : (password1) => {
        return /= return / / / /> password1) && /)/test (password1) && /\ wo|_/.test (passeword1) && password1.length> = 6;
      }
    },
    password2 : {
      ???,
      Sameaspassword : Sameas ( 'password1')
    }
  }
}

???? ?? ? ?? ???? ???? ??????.

 <label for="fpass1">????*</label>
<input type="password" v-model="$v.formResponses.password1.$model" id="fpass1">
<p class="error" v-if="!$v.formResponses.password1.required">? ??? ?????</p>
<p class="error" v-if="!$v.formResponses.password1.strongPassword">?????? ?? ??? ??? ??, 1 ?? ??, ??? ?? ??? ??????? ??? 6 ? ????????.</p>

<label for="fpass2">???? ??*</label>
<input type="password" v-model="$v.formResponses.password2.$model" id="fpass2">
<p class="error" v-if="!$v.formResponses.password2.required">? ??? ?????</p>
<p class="error" v-if="!$v.formResponses.password2.sameAsPassword">??? ???? ????.</p>

?? ? ??? ??

? ??? ?? ??? ?? ?? ?? ?? ??????. $v.formResponses.$anyError ???? ??? ??????.

?? ?? ?? :

 ??? () {
  ?? {
    Uistate : '???? ??',
    ?? : ??,
    ?? ?? : {
      // ...
    }
  }
},

?? ??? ???? ??? ??????.

 <button>????</button>

 ??? () {
  this.errors = this. $ v. formresponses. $ anyError;
  this.uistate = '?? ??';
  if (! this.errors) {
    // ?? ??? ??
    this.uistate = '?? ??';
  }
},

?? ??? ?? ??? ???? ?????.

<p v-if="errors && uiState === 'submit clicked'"> ???? ??? ????. ???? ?? ??????.</p>
<p v-else-if="uiState === 'form submitted'">??? ????? ???????!</p>

??? ?? ??? ?????? ??? ???? ???????. ?? ??? ?? ??? ?? ?? ?????? ???? ?? ??????. ? ??? ?? ????? ??? ??? ? ?? ??? ?????. ? ????? ?? ? Damian Dulisz?? ??????.

? ??? Vuelidate? 1 ?? ??? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!