Vue.js 2.0에서 유효성 검사는 어떻게 이루어 집니까?

Question

Vue.js의 새로운 기능 Google 검색 및 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(...)를 통해) 플러그인으로 사용자의 뷰 응용 프로그램에 추가 한 후

, 당신과 같이 입력 유효성을 검사 할 수 있습니다 :

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