index.vue
1.85 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
import VuerifyDirective from 'v-vuerify'
<template>
<div>
<input type="email" v-model="username" placeholder="email" v-verify="'email'" vuerify-invalid-class="errors">
<input type="text" v-model="usernameInfo">
</div>
<div>
<!-- <form @submit.prevent="handleSubmit"> -->
<!-- <input type="email" v-model="username" placeholder="username"> -->
<input type="text" v-model="num" placeholder="手机号码" @change="handleSubmit">
<input type="password" v-model="password" placeholder="password">
<input type="password" v-model="conform" placeholder="conform">
<ul>
<li v-for="err in errors" v-text="err"></li>
</ul>
</div>
</div>
<!-- <div v-text="ins"></div> -->
</template>
<script>
module.exports={
data:function(){
return {
username: '',
usernameInfo:'',
password: '',
conform: '',
num:'',
}
},
// vuerify: {
// username: {
// test: 'email',
// message: '邮箱错误'
// },
// num:{
// test: /^[\u4e00-\u9fa5]{0,}$/,
// message: '手机号码错误'
// },
// password: {
// test: /\w{4,}/,
// message: '至少四位字符'
// },
// conform: {
// test:function (val) {
// return val && !this.$vuerify.$errors.password && val === this.password
// },
// message: '两次密码输入不一致'
// }
// },
computed: {
errors:function(){
this.usernameInfo = this.$vuerify.$errors.username;
alert(JSON.stringify(this.$vuerify.$errors));
},
// invalid:function() {
// return this.$vuerify.invalid
// }
},
// watch: {
// username:function(val) {
// }
// }
methods: {
handleSubmit:function () {
if (this.$vuerify.check()) {
alert('welcome ${this.username}') // eslint-disable-line
}
}
}
}
</script>