validation验证
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>validation timing customization example</title> <script src="http://cdn.bootcss.com/vue/1.0.24/vue.min.js"></script> <script src="http://cdn.bootcss.com/vue-validator/2.1.2/vue-validator.min.js"></script> <style> .errors { color: red; } </style> </head> <body> <div id="app2"> <validator name="validation"> <form novalidate @submit="onSubmit" action="email.html"> <div>Email: <input type="text" v-validate:myemail="{required: true, email:true}"></div> <div v-if="$validation.myemail.touched" class="errors"> <div v-if="$validation.myemail.required">密码不能为空!</div> <div v-if="!$validation.myemail.required && $validation.myemail.email">请输入正确的邮箱格式</div> </div> <div>Phone: <input type="text" v-validate:myphone="{required: true, phone:true}"></div> <div v-if="$validation.myphone.touched" class="errors"> <div v-if="$validation.myphone.required">手机号不能为空!</div> <div v-if="!$validation.myphone.required && $validation.myphone.phone">请输入正确的手机号格式</div> </div> <div><button type="submit">register</button></div> </form> </validator> </div> <script> Vue.validator('email', function (val) { return /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(val) }); Vue.validator('phone', function (val) { return /^(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[57])[0-9]{8}$/.test(val) }) new Vue({ el: '#app2', data: { email:'', phone:'' }, validators: { confirm: function (val, target) { return val === target } }, methods: { onSubmit: function (e) { this.$validate(true) if (this.$validation.invalid) { e.preventDefault() } } } }) </script> </body> </html>