Vue.js 2.0で検証はどのように機能しますか？

Question

Vue.jsの新着私はグーグルで、Vue.js 1.0のための多くのリソースを見つけましたが、vue js 2.0のリソースは見つかりませんでした。

Answer 1

Vue.js 2の検証は、Vue.jsバージョン1と非常によく似ています。これは、箱からすぐに小道具を検証することができます。あなたが入力検証を持っているしたい場合は、ライブラリを使用する必要が

Vue.component('example', { 
    props: { 
    // basic type check (`null` means accept any type) 
    propA: Number, 
    // multiple possible types 
    propB: [String, Number], 
    // a required string 
    propC: { 
     type: String, 
     required: true 
    }, 
    // a number with default value 
    propD: { 
     type: Number, 
     default: 100 
    }, 
    // object/array defaults should be returned from a 
    // factory function 
    propE: { 
     type: Object, 
     default: function() { 
     return { message: 'hello' } 
     } 
    }, 
    // custom validator function 
    propF: { 
     validator: function (value) { 
     return value > 10 
     } 
    } 
    } 
}) 

：the documentationに応じてそれを行うための6つの方法があります。最も一般的なのはvue-validatorです。

あなたは（Vue.use(...)経由）プラグインとしてごVueのアプリにそれを追加した後、あなたはそうのような入力を検証することができます

<div id="app"> 
    <validator name="validation1"> 
    <form novalidate> 
     <div class="username-field"> 
     <label for="username">username:</label> 
     <input id="username" type="text" v-validate:username="['required']"> 
     </div> 

     </div> 
     <div class="errors"> 
     <p v-if="$validation1.username.required">Required your name.</p> 
     </div> 
     <input type="submit" value="send" v-if="$validation1.valid"> 
    </form> 
    </validator> 
</div>