<div> <validator> <form novalidate> message: <input type="text" v-model="msg" v-validate:message="{required: ture, minlength: 8}" /> <br /> <p v-if="$validation.message.required">message不能为空</p> <p v-if="$validation.message.minlength">message输入太长位数</p> </form> </validator> </div> <script src="https://cdn.bootcss.com/vue/1.0.24/vue.js" type="text/javascript" charset="utf-8"></script> <script src="https://cdn.bootcss.com/vue-validator/2.1.3/vue-validator.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { msg: '' } }); setTimeout(function () { vm.msg = 'hello world!'; }, 2000); </script>
重置校验结果
通过在Vue组件实例上调用$resetValidation();方法来动态重置校验结果。
<div> <validator> <form novalidate> <div> <label for="username">username:</label> <input type="text" v-validate:username="['required']" /> </div> <div> <label for="comment">comment:</label> <input type="text" v-validate:comment="{maxlength: 256}" /> </div> <div> <p v-if="$validation.username.required">用户名不能为空</p> <p v-if="$validation.comment.maxlength">输入文字超过256个</p> <input type="submit" value="send" v-if="$validation.valid" /> <button type="button" @click="onReset">Reset Validation</button> </div> <pre>{{$validation | json}}</pre> </form> </validator> </div> <script src="https://cdn.bootcss.com/vue/1.0.24/vue.js" type="text/javascript" charset="utf-8"></script> <script src="https://cdn.bootcss.com/vue-validator/2.1.3/vue-validator.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el: '#app', methods: { onReset: function () { this.$resetValidation(); } } }); </script>
复选框checkbox
<div> <validator> <form novalidate> <h1>调查</h1> <fieldset> <legend>请选择水果</legend> <input type="checkbox" value="apple" v-validate:fruits="{ required: { rule: true, message: requiredErrorMsg }, minlength: { rule: 1, message: minlengthErrorMsg }, maxlength: { rule: 2, message: maxlengthErrorMsg } }" /> <label for="apple">Apple</label> <input type="checkbox" value="orange" v-validate:fruits /> <label for="orange">Orange</label> <input type="checkbox" value="grape" v-validate:fruits /> <label for="grape">Grape</label> <input type="checkbox" value="banana" v-validate:fruits /> <label for="banana">Banana</label> <ul> <li v-for="msg in $validation.fruits"> <p>{{msg | json}}</p> </li> </ul> </fieldset> </form> </validator> </div> <script src="https://cdn.bootcss.com/vue/1.0.24/vue.js" type="text/javascript" charset="utf-8"></script> <script src="https://cdn.bootcss.com/vue-validator/2.1.3/vue-validator.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el: '#app', computed: { requiredErrorMsg: function () { return '请选择水果'; }, minlengthErrorMsg: function () { return '请选择至少1个水果!'; }, maxlengthErrorMsg: function () { return '请选择最多2个水果!'; } } }); </script>
下拉类表select
<div> <validator> <form novalidate> <select v-validate:lang="{required: true}"> <option value="">请选择语言</option> <option value="javascript">javascript</option> <option value="php">php</option> <option value="node">node</option> </select> <div> <p v-if="$validation.lang.required">不能为空！</p> </div> </form> </validator> </div> <script src="https://cdn.bootcss.com/vue/1.0.24/vue.js" type="text/javascript" charset="utf-8"></script> <script src="https://cdn.bootcss.com/vue-validator/2.1.3/vue-validator.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el: '#app' }); </script>
校验状态class
各校验状态都有其对应的class(默认) 也可以自定义校验状态class