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