<validator :classes="{touched: 'touehc-validator', dirty: 'dirty-validator'}"> <label for="username">username</label> <<input type="text" :classes="{valid: 'valid-username', invalid: 'invalid-username'}" v-validate:username="{required: {rule: true, message: 'required you name!'}}"> </validator> <!-- classes属性只能在validator元素或应用了v-validate的元素上使用有效 -->
分组校验
vue-validator支持分组校验。例如重复密码功能。
<div> <validator :groups="['passwordGroup']"> <form novalidate> username: <input type="text" v-validate:username="['required']" /><br /> password: <input type="password" v-validate:password="{ minlength: 8, required: true }" group="passwordGroup" /><br /> comfirm password: <input type="password" v-validate:password-comfirm="{minlength: 8, required: true}" group="passwordGroup" /> <div> <p v-if="$validation.username.required">用户名不能为空</p> <p v-if="$validation.password.required">密码不能为空</p> <p v-if="$validation.password.minlength">密码不能少于8位</p> <p v-if="$validation.password-comfirm.required">重复密码不能为空</p> <p v-if="$validation.password-comfirm.minlength">密码不能少于8位</p> <p v-if="$validation.passwordGroup.valid">密码不一致</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>