vue-validator は validator
エレメントディレクティブと v-validate
ディレクティブで自動的にバリデートを実行します。しかしながら時々、自動バリデーションを無効化し手動でバリデートを実行したい時があります。
vue-validator は初回コンパイルを終えると、それぞれの v-validate
ディレクティブは自動的に対象エレメントのバリデートを実行します。もしこの挙動を望まない場合は、 initial
属性又は v-validate
を指定できます:
<div id="app">
<validator name="validation1">
<form novalidate>
<div class="username-field">
<label for="username">username:</label>
<!-- 'inital' attribute is applied the all validators of target element (e.g. required, exist) -->
<input id="username" type="text" initial="off" v-validate:username="['required', 'exist']">
</div>
<div class="password-field">
<label for="password">password:</label>
<!-- 'initial' optional is applied with `v-validate` validator (e.g. required only) -->
<input id="password" type="password" v-validate:passowrd="{ required: { rule: true, initial: 'off' }, minlength: 8 }">
</div>
<input type="submit" value="send" v-if="$validation1.valid">
</form>
</validator>
</div>
This is useful, when you need to suppress the validation (like the server-side validation) with async validation feature (explain later). これは非同期的な特徴のバリデーション(サーバーサイドバリデーションのような)を抑制する必要がある場合に便利です。(後ほど説明します)
vue-validator はフォーム要素(input, checkbox, select, 等)のDOMイベント (input
, blur
, change
)を検知したら自動的にバリデートを実行します。このような場合は、detect-change
, detect-blur
属性を使ってください:
<div id="app">
<validator name="validation">
<form novalidate @submit="onSubmit">
<h1>user registration</h1>
<div class="username">
<label for="username">username:</label>
<input id="username" type="text"
detect-change="off" detect-blur="off" v-validate:username="{
required: { rule: true, message: 'required you name !!' }
}" />
</div>
<div class="password">
<label for="password">password:</label>
<input id="password" type="password" v-model="password"
detect-change="off" detect-blur="off" v-validate:password="{
required: { rule: true, message: 'required you new password !!' },
minlength: { rule: 8, message: 'your new password short too !!' }
}" />
</div>
<div class="confirm">
<label for="confirm">confirm password:</label>
<input id="confirm" type="password"
detect-change="off" detect-blur="off" v-validate:confirm="{
required: { rule: true, message: 'required you confirm password !!' },
confirm: { rule: password, message: 'your confirm password incorrect !!' }
}" />
</div>
<div class="errors" v-if="$validation.touched">
<validator-errors :validation="$validation"></validator-errors>
</div>
<input type="submit" value="register" />
</form>
</validator>
</div>
new Vue({
el: '#app',
data: {
password: ''
},
validators: {
confirm: function (val, target) {
return val === target
}
},
methods: {
onSubmit: function (e) {
// validate manually
this.$validate(true)
if (this.$validation.invalid) {
e.preventDefault()
}
}
}
})