Wie funktioniert die Validierung in Vue.js 2.0?

Question

Neu bei Vue.js. Ich habe gegoogelt und eine Menge Ressourcen für Vue.js 1.0 gefunden, aber nicht für vue js 2.0.

Answer 1

Vue.js 2 Validierung ist sehr ähnlich zu Vue.js Version 1. Es kann nur Requisiten aus der Box validieren. Es gibt 6 Möglichkeiten, das zu tun, nach 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 
     } 
    } 
    } 
}) 

Wenn Sie Eingabevalidierung haben, müssen Sie eine Bibliothek verwenden. Der bekannteste ist vue-validator.

Nachdem Sie es zu Ihrem Vue App als Plugin (via Vue.use(...)) hinzufügen, können Sie Eingabe bestätigen wie so:

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