Skip to content
This repository was archived by the owner on Dec 25, 2017. It is now read-only.

Commit 4c12e7b

Browse files
kazuponkazupon
committed
docs(example): add v-model examples
1 parent f4d8610 commit 4c12e7b

File tree

4 files changed

+181
-0
lines changed

4 files changed

+181
-0
lines changed

‎example/model/checkbox/index.html

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>v-model validation example for checkbox</title>
6+
<script src="../../../node_modules/vue/dist/vue.min.js"></script>
7+
<script src="../../../dist/vue-validator.min.js"></script>
8+
<style>
9+
.errors { color: red; }
10+
</style>
11+
</head>
12+
<body>
13+
<div id="app">
14+
<validator name="validation1">
15+
<form novalidate>
16+
<h1>Survey</h1>
17+
<fieldset>
18+
<legend>Which do you like fruit ?</legend>
19+
<input id="apple" type="checkbox" value="apple" v-model="selected" v-validate:fruits="{
20+
required: { rule: true, message: requiredErrorMsg },
21+
minlength: { rule: 1, message: minlengthErrorMsg },
22+
maxlength: { rule: 2, message: maxlengthErrorMsg }
23+
}">
24+
<label for="apple">Apple</label>
25+
<input id="orange" type="checkbox" value="orange" v-model="selected" v-validate:fruits>
26+
<label for="orange">Orage</label>
27+
<input id="grape" type="checkbox" value="grage" v-model="selected" v-validate:fruits>
28+
<label for="grape">Grape</label>
29+
<input id="banana" type="checkbox" value="banana" v-model="selected" v-validate:fruits>
30+
<label for="banana">Banana</label>
31+
<ul class="errors">
32+
<li v-for="msg in $validation1.fruits.messages">
33+
<p>{{msg}}</p>
34+
</li>
35+
</ul>
36+
<pre>$data: {{ $data | json }}</pre>
37+
</fieldset>
38+
</form>
39+
</validator>
40+
</div>
41+
<script>
42+
new Vue({
43+
el: '#app',
44+
data: { selected: [] },
45+
computed: {
46+
requiredErrorMsg: function () {
47+
return 'Required fruit !!'
48+
},
49+
minlengthErrorMsg: function () {
50+
return 'Please chose at least 1 fruit !!'
51+
},
52+
maxlengthErrorMsg: function () {
53+
return 'Please chose at most 2 fruits !!'
54+
}
55+
}
56+
})
57+
</script>
58+
</body>
59+
</html>

‎example/model/radio/index.html

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>v-model validation example for radio button</title>
6+
<script src="../../../node_modules/vue/dist/vue.min.js"></script>
7+
<script src="../../../dist/vue-validator.min.js"></script>
8+
<style> .errors { color: red; }</style>
9+
</head>
10+
<body>
11+
<div id="app">
12+
<validator name="validation1">
13+
<form novalidate>
14+
<h1>Survey</h1>
15+
<fieldset>
16+
<legend>Which do you like fruit ?</legend>
17+
<input id="apple" type="radio" name="fruit" value="apple" v-model="selected" v-validate:fruits="{
18+
required: { rule: true, message: requiredErrorMsg },
19+
}">
20+
<label for="apple">Apple</label>
21+
<input id="orange" type="radio" name="fruit" value="orange" v-model="selected" v-validate:fruits>
22+
<label for="orange">Orage</label>
23+
<input id="grape" type="radio" name="fruit" value="grage" v-model="selected" v-validate:fruits>
24+
<label for="grape">Grape</label>
25+
<input id="banana" type="radio" name="fruit" value="banana" v-model="selected" v-validate:fruits>
26+
<label for="banana">Banana</label>
27+
<ul class="errors">
28+
<li v-for="msg in $validation1.fruits.messages">
29+
<p>{{msg}}</p>
30+
</li>
31+
</ul>
32+
<pre>$data: {{ $data | json }}</pre>
33+
</fieldset>
34+
</form>
35+
</validator>
36+
</div>
37+
<script>
38+
new Vue({
39+
el: '#app',
40+
data: { selected: '' },
41+
computed: {
42+
requiredErrorMsg: function () {
43+
return 'Required fruit !!'
44+
}
45+
}
46+
})
47+
</script>
48+
</body>
49+
</html>

‎example/model/select/index.html

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>v-model validation example for select</title>
6+
<script src="../../../node_modules/vue/dist/vue.min.js"></script>
7+
<script src="../../../dist/vue-validator.min.js"></script>
8+
<style>.errors { color: red; }</style>
9+
</head>
10+
<body>
11+
<div id="app">
12+
<validator name="validation1">
13+
<form novalidate>
14+
<label for="language">select your favorite programming languages</label><br />
15+
<select multiple size="10" v-model="langs" v-validate:lang="{ required: true, maxlength: 3 }">
16+
<option value="javascript">JavaScript</option>
17+
<option value="ruby">Ruby</option>
18+
<option value="python">Python</option>
19+
<option value="perl">Perl</option>
20+
<option value="lua">Lua</option>
21+
<option value="go">Go</option>
22+
<option value="rust">Rust</option>
23+
<option value="elixir">Elixir</option>
24+
<option value="c">C</option>
25+
<option value="none">Not a nothing here</option>
26+
</select>
27+
<div class="errors">
28+
<p v-if="$validation1.lang.required">Required !!</p>
29+
<p v-if="$validation1.lang.maxlength">Sorry, The maximum is 3 languages !!</p>
30+
</div>
31+
<pre>$data: {{ $data | json }}</pre>
32+
</form>
33+
</validator>
34+
</div>
35+
<script>
36+
new Vue({
37+
el: '#app',
38+
data: { langs: ['javascript', 'lua', 'go'] }
39+
})
40+
</script>
41+
</body>
42+
</html>

‎example/model/text/index.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>v-model validation example for textbox</title>
6+
<script src="../../../node_modules/vue/dist/vue.min.js"></script>
7+
<script src="../../../dist/vue-validator.min.js"></script>
8+
</head>
9+
<body>
10+
<div id="app">
11+
<validator name="validation1">
12+
<form novalidate>
13+
message: <input type="text" v-model="msg" v-validate:message="{ required: true, minlength: 8 }"><br />
14+
<div>
15+
<p v-if="$validation1.message.required">Required your message.</p>
16+
<p v-if="$validation1.message.minlength">Too short message.</p>
17+
</div>
18+
<pre>$data: {{ $data | json }}</pre>
19+
</form>
20+
</validator>
21+
</div>
22+
<script>
23+
new Vue({
24+
el: '#app',
25+
data: {
26+
msg: 'hello'
27+
}
28+
})
29+
</script>
30+
</body>
31+
</html>

0 commit comments

Comments
 (0)