Как работает валидация в Vue.js 2.0?

Question

Новое для Vue.js. Я googled и нашел много ресурсов для Vue.js 1.0, но не для vue js 2.0.

Answer 1

Проверка Vue.js 2 очень похожа на версию Vue.js 1. Она может только проверять реквизит из коробки. Есть 6 способов сделать это, в соответствии с the documentation:

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 
     } 
    } 
    } 
}) 

Если вы хотите иметь проверку входных данных, вам нужно использовать библиотеку. Самый популярный из них - vue-validator.

После добавления его в Vue приложение как плагин (через Vue.use(...)), вы можете подтвердить ввод следующим образом:

<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>