Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- # バリデーションタイミング変更
- vue-validator は `validator` エレメントディレクティブと `v-validate` ディレクティブで自動的にバリデートを実行します。しかしながら時々、自動バリデーションを無効化し手動でバリデートを実行したい時があります。
- ## `initial`
- vue-validator は初回コンパイルを終えると、それぞれの `v-validate` ディレクティブは自動的に対象エレメントのバリデートを実行します。もしこの挙動を望まない場合は、 `initial` 属性又は `v-validate` を指定できます:
- ```html
- <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).
- これは非同期的な特徴のバリデーション(サーバーサイドバリデーションのような)を抑制する必要がある場合に便利です。(後ほど説明します)
- ## `detect-blur` と `detect-change`
- vue-validator はフォーム要素(input, checkbox, select, 等)のDOMイベント (`input`, `blur`, `change`)を検知したら自動的にバリデートを実行します。このような場合は、`detect-change`, `detect-blur` 属性を使ってください:
- ```html
- <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>
- ```
- ```javascript
- 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()
- }
- }
- }
- })
- ```
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement