-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.html
95 lines (88 loc) · 2.92 KB
/
index.html
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
92
93
94
95
<!DOCTYPE html>
<html>
<head>
<title>vue-validator</title>
<style>
body { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; margin: 20px; }
table.form td { margin:5px; padding: 5px; }
pre { font-size:11px; background: #eee; padding: 5px; }
h3 {margin:0;}
input { border: 1px solid gray; padding: 3px 6px; border-radius: 2px; }
.valid { }
.invalid { color: red; border-color: red; }
.invalid input { color: red; border-color: red; }
.invalidText { color: red; }
</style>
</head>
<body id="app">
<h1>Vue-validator</h1>
<table class="form">
<tr v-class="invalidText: !validator.form.name.valid">
<td>First name</td>
<td><input type="text" v-model="form.name" v-valid="required,alpha" value="Rado" lazy/> (lazy) <span v-if="validator.form.name.modified">modified</span></td>
</tr>
<tr v-class="invalidText: !validator.form.age.valid">
<td>Age</td>
<td><input type="text" v-model="form.age" v-valid="required,integer,min: 10" number/></td>
</tr>
<tr v-class="invalidText: !validator.form.check.valid">
<td>Check</td>
<td><input type="checkbox" v-model="form.check" v-valid="required"/></td>
</tr>
<tr v-class="invalidText: !validator.form.pattern.valid">
<td>Pattern</td>
<td><input type="text" v-model="form.pattern" v-valid="required,minLength:4,pattern: /abc/"/></td>
</tr>
<tr v-class="invalidText: !validator.form.email.valid">
<td>Email</td>
<td><input type="text" v-model="form.email" v-valid="required,email"/></td>
</tr>
<tr>
<td>Address</td>
<td>
<input type="text" v-model="form.addresses[0].name" v-valid="alpha"/> <br/>
<input type="text" v-model="form.addresses[1].name" v-valid="alpha"/>
</td>
</tr>
<tr>
<td>Address 2</td>
<td>
<ul>
<li v-repeat="form.addresses2">
<input type="text" v-model="form.addresses2[$index].v" v-valid="alpha"/> <br/>
<button v-on="click: form.addresses2.$remove($index)">remove</button>
</li>
</ul>
<input type="text" placeholder="add address" v-on="keyup: addAddress | key enter"/>
</td>
</tr>
<tr>
<td>Text component</td>
<td>
<div v-component="test" v-with="text:form.text" v-valid="required" model="text"></div>
</td>
</tr>
<tr >
<td></td>
<td><button v-on="click: onSave">Save</button> <span v-if="isModified">modified</span></td>
</tr>
</table>
<br/>
<div v-if="!isValid" style="text-align: center;padding: 5px; color: white" v-style="background-color: isValid ? 'green' : 'red'">
<span>INVALID</span>
</div>
<br/>
form data: <br/>
<pre style="font-size:11px">
{{form | JSON}}
</pre>
<br/>
validator: <br/>
<pre style="font-size:11px">
{{validator | JSON}}
</pre>
<br/>
GitHub pages: <a href="https://github.com/xrado/vue-validator">https://github.com/xrado/vue-validator</a>
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.min.js" data-main="demo.js" type="text/javascript"></script>
</body>
</html>