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

Commit 41a9dc6

Browse files
kazuponkazupon
committed
🆙 update(examples): update v-model integration examples [ci skip]
NOTICE: v-model integration is still buggy ... 🙇
1 parent f3acdd3 commit 41a9dc6

File tree

5 files changed

+257
-109
lines changed

5 files changed

+257
-109
lines changed

‎examples/model/checkbox/index.html

+43-32
Original file line numberDiff line numberDiff line change
@@ -2,46 +2,46 @@
22
<html>
33
<head>
44
<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>
5+
<title>v-model integration example for checkbox</title>
6+
<script src="../../../node_modules/vue/dist/vue.js"></script>
7+
<script src="../../../dist/vue-validator.js"></script>
88
<style>
9+
input.invalid { border-color: red; }
910
.errors { color: red; }
1011
</style>
1112
</head>
1213
<body>
1314
<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="error in $validation1.fruits.errors">
33-
<p>{{error.message}}</p>
34-
</li>
35-
</ul>
36-
<pre>$data: {{ $data | json }}</pre>
37-
</fieldset>
38-
</form>
39-
</validator>
15+
<h1>Survey</h1>
16+
<validity-group ref="validity" field="fruits" :validators="{
17+
required: { rule: true, message: requiredErrorMsg },
18+
minlength: { rule: 1, message: minlengthErrorMsg },
19+
maxlength: { rule: 2, message: maxlengthErrorMsg }
20+
}">
21+
<legend>Which do you like fruit ?</legend>
22+
<input id="apple" type="checkbox" value="apple" v-model.validity="selected">
23+
<label for="apple">Apple</label>
24+
<input id="orange" type="checkbox" value="orange" v-model.validity="selected">
25+
<label for="orange">Orage</label>
26+
<input id="grape" type="checkbox" value="grage" v-model.validity="selected">
27+
<label for="grape">Grape</label>
28+
<input id="banana" type="checkbox" value="banana" v-model.validity="selected">
29+
<label for="banana">Banana</label>
30+
<ul class="errors">
31+
<li v-for="error in result.errors">
32+
<p>{{error.message}}</p>
33+
</li>
34+
</ul>
35+
</validity-group>
36+
<button @click="handleApply">Apply</button>
37+
<p>model value: {{selected}}</p>
4038
</div>
4139
<script>
4240
new Vue({
43-
el: '#app',
44-
data: { selected: [] },
41+
data: {
42+
selected: [],
43+
result: {}
44+
},
4545
computed: {
4646
requiredErrorMsg: function () {
4747
return 'Required fruit !!'
@@ -52,8 +52,19 @@ <h1>Survey</h1>
5252
maxlengthErrorMsg: function () {
5353
return 'Please chose at most 2 fruits !!'
5454
}
55+
},
56+
methods: {
57+
handleApply: function (e) {
58+
var self = this
59+
var $validity = this.$refs.validity
60+
$validity.validate(function () {
61+
var result = $validity.result
62+
self.result = result
63+
$validity.pass(result.valid)
64+
})
65+
}
5566
}
56-
})
67+
}).$mount('#app')
5768
</script>
5869
</body>
5970
</html>

‎examples/model/component/index.html

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>component validation example</title>
6+
<script src="https://unpkg.com/[email protected]"></script>
7+
<script src="https://unpkg.com/[email protected]"></script>
8+
<script src="../../../node_modules/vue/dist/vue.js"></script>
9+
<script src="../../../dist/vue-validator.js"></script>
10+
<link href="https://unpkg.com/[email protected]/dist/css/select2.min.css" rel="stylesheet" type="text/css">
11+
<style>
12+
input.invalid { border-color: red; }
13+
.errors { color: red; }
14+
</style>
15+
</head>
16+
<body>
17+
<div id="app">
18+
<validity ref="validity" field="select" :validators="{
19+
selected: { rule: true, message: 'not selected item!!' }
20+
}">
21+
<select2 :options="options" v-model.validity="selected" @input="handleValidate">
22+
<option value="0">----- Select one -----</option>
23+
</select2>
24+
</validity>
25+
<p class="errors" v-if="result.selected">{{result.selected}}</p>
26+
</div>
27+
<script>
28+
new Vue({
29+
data: {
30+
selected: 0,
31+
options: [
32+
{ id: 1, text: 'Hello' },
33+
{ id: 2, text: 'World' }
34+
],
35+
result: {}
36+
},
37+
validators: {
38+
selected: function (val) {
39+
return parseInt(val, 10) !== 0
40+
}
41+
},
42+
components: {
43+
// select2 wrap component
44+
select2: {
45+
template: '<select><slot></slot></select>',
46+
props: ['options', 'value'],
47+
mounted: function () {
48+
var vm = this
49+
$(this.$el)
50+
.val(this.value)
51+
.select2({ data: this.options })
52+
.on('change', function () {
53+
// value: event out
54+
vm.$emit('input', this.value)
55+
})
56+
},
57+
watch: {
58+
value: function (value) {
59+
$(this.$el).select2('val', value)
60+
},
61+
options: function (options) {
62+
$(this.$el).select2({ data: options })
63+
}
64+
},
65+
destroyed: function () {
66+
$(this.$el).off().select2('destroy')
67+
}
68+
}
69+
},
70+
mounted () {
71+
// initial validation
72+
this.validate(this.selected)
73+
},
74+
methods: {
75+
// wrapper method of $validity.validate
76+
validate: function (val, fn) {
77+
var self = this
78+
var $validity = this.$refs.validity
79+
$validity.validate({ validator: 'selected', value: val }, function () {
80+
var result = $validity.result
81+
fn && fn(result)
82+
self.result = result
83+
})
84+
},
85+
handleValidate: function (val) {
86+
var $validity = this.$refs.validity
87+
this.validate(val, function (result) {
88+
$validity.pass()
89+
})
90+
}
91+
}
92+
}).$mount('#app')
93+
</script>
94+
</body>
95+
</html>

‎examples/model/radio/index.html

+44-31
Original file line numberDiff line numberDiff line change
@@ -2,48 +2,61 @@
22
<html>
33
<head>
44
<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>
5+
<title>v-model integration example for radio</title>
6+
<script src="../../../node_modules/vue/dist/vue.js"></script>
7+
<script src="../../../dist/vue-validator.js"></script>
8+
<style>
9+
input.invalid { border-color: red; }
10+
.errors { color: red; }
11+
</style>
912
</head>
1013
<body>
1114
<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="error in $validation1.fruits.errors">
29-
<p>{{error.message}}</p>
30-
</li>
31-
</ul>
32-
<pre>$data: {{ $data | json }}</pre>
33-
</fieldset>
34-
</form>
35-
</validator>
15+
<h1>Survey</h1>
16+
<validity-group ref="validity" field="fruits" :validators="{
17+
required: { rule: true, message: requiredErrorMsg }
18+
}">
19+
<legend>Which do you like fruit ?</legend>
20+
<input id="apple" type="radio" name="fruit" value="apple" v-model.validity="selected">
21+
<label for="apple">Apple</label>
22+
<input id="orange" type="radio" name="fruit" value="orange" v-model.validity="selected">
23+
<label for="orange">Orage</label>
24+
<input id="grape" type="radio" name="fruit" value="grage" v-model.validity="selected">
25+
<label for="grape">Grape</label>
26+
<input id="banana" type="radio" name="fruit" value="banana" v-model.validity="selected">
27+
<label for="banana">Banana</label>
28+
<ul class="errors">
29+
<li v-for="error in result.errors">
30+
<p>{{error.message}}</p>
31+
</li>
32+
</ul>
33+
</validity-group>
34+
<button @click="handleApply">Apply</button>
35+
<p>model value: {{selected}}</p>
3636
</div>
3737
<script>
3838
new Vue({
39-
el: '#app',
40-
data: { selected: '' },
39+
data: {
40+
selected: '',
41+
result: {}
42+
},
4143
computed: {
4244
requiredErrorMsg: function () {
4345
return 'Required fruit !!'
4446
}
47+
},
48+
methods: {
49+
handleApply: function (e) {
50+
var self = this
51+
var $validity = this.$refs.validity
52+
$validity.validate(function () {
53+
var result = $validity.result
54+
self.result = result
55+
$validity.pass(result.valid)
56+
})
57+
}
4558
}
46-
})
59+
}).$mount('#app')
4760
</script>
4861
</body>
4962
</html>

‎examples/model/select/index.html

+44-29
Original file line numberDiff line numberDiff line change
@@ -2,41 +2,56 @@
22
<html>
33
<head>
44
<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>
5+
<title>v-model intergration example for select</title>
6+
<script src="../../../node_modules/vue/dist/vue.js"></script>
7+
<script src="../../../dist/vue-validator.js"></script>
8+
<style>
9+
select.invalid { border-color: red; }
10+
.errors { color: red; }
11+
</style>
912
</head>
1013
<body>
1114
<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>
15+
<label for="language">select your favorite programming languages</label><br />
16+
<validity ref="validity" field="lang" :validators="{ required: true, maxlength: 3 }">
17+
<select multiple size="10" v-model.validity="langs">
18+
<option value="javascript">JavaScript</option>
19+
<option value="ruby">Ruby</option>
20+
<option value="python">Python</option>
21+
<option value="perl">Perl</option>
22+
<option value="lua">Lua</option>
23+
<option value="go">Go</option>
24+
<option value="rust">Rust</option>
25+
<option value="elixir">Elixir</option>
26+
<option value="c">C</option>
27+
<option value="none">Not a nothing here</option>
28+
</select>
29+
</validity>
30+
<div class="errors">
31+
<p v-if="result.required">Required !!</p>
32+
<p v-if="result.maxlength">Sorry, The maximum is 3 languages !!</p>
33+
</div>
34+
<button @click="handleApply">Apply</button>
35+
<p>model value: {{langs}}</p>
3436
</div>
3537
<script>
3638
new Vue({
37-
el: '#app',
38-
data: { langs: ['javascript', 'lua', 'go'] }
39-
})
39+
data: {
40+
langs: ['javascript', 'lua', 'go'],
41+
result: {}
42+
},
43+
methods: {
44+
handleApply: function (e) {
45+
var self = this
46+
var $validity = this.$refs.validity
47+
$validity.validate(function () {
48+
var result = $validity.result
49+
self.result = result
50+
$validity.pass(result.valid)
51+
})
52+
}
53+
}
54+
}).$mount('#app')
4055
</script>
4156
</body>
4257
</html>

0 commit comments

Comments
 (0)