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

Commit

Permalink
🆙 update(examples): update v-model integration examples [ci skip]
Browse files Browse the repository at this point in the history 
NOTICE:
  v-model integration is still buggy ... 🙇
  • Loading branch information
@kazupon
kazupon committed Oct 24, 2016
1 parent f3acdd3 commit 41a9dc6
Show file tree
Hide file tree
Showing 5 changed files with 257 additions and 109 deletions.
75 changes: 43 additions & 32 deletions examples/model/checkbox/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,46 +2,46 @@
<html>
<head>
<meta charset="utf-8">
<title>v-model validation example for checkbox</title>
<script src="../../../node_modules/vue/dist/vue.min.js"></script>
<script src="../../../dist/vue-validator.min.js"></script>
<title>v-model integration example for checkbox</title>
<script src="../../../node_modules/vue/dist/vue.js"></script>
<script src="../../../dist/vue-validator.js"></script>
<style>
input.invalid { border-color: red; }
.errors { color: red; }
</style>
</head>
<body>
<div id="app">
<validator name="validation1">
<form novalidate>
<h1>Survey</h1>
<fieldset>
<legend>Which do you like fruit ?</legend>
<input id="apple" type="checkbox" value="apple" v-model="selected" v-validate:fruits="{
required: { rule: true, message: requiredErrorMsg },
minlength: { rule: 1, message: minlengthErrorMsg },
maxlength: { rule: 2, message: maxlengthErrorMsg }
}">
<label for="apple">Apple</label>
<input id="orange" type="checkbox" value="orange" v-model="selected" v-validate:fruits>
<label for="orange">Orage</label>
<input id="grape" type="checkbox" value="grage" v-model="selected" v-validate:fruits>
<label for="grape">Grape</label>
<input id="banana" type="checkbox" value="banana" v-model="selected" v-validate:fruits>
<label for="banana">Banana</label>
<ul class="errors">
<li v-for="error in $validation1.fruits.errors">
<p>{{error.message}}</p>
</li>
</ul>
<pre>$data: {{ $data | json }}</pre>
</fieldset>
</form>
</validator>
<h1>Survey</h1>
<validity-group ref="validity" field="fruits" :validators="{
required: { rule: true, message: requiredErrorMsg },
minlength: { rule: 1, message: minlengthErrorMsg },
maxlength: { rule: 2, message: maxlengthErrorMsg }
}">
<legend>Which do you like fruit ?</legend>
<input id="apple" type="checkbox" value="apple" v-model.validity="selected">
<label for="apple">Apple</label>
<input id="orange" type="checkbox" value="orange" v-model.validity="selected">
<label for="orange">Orage</label>
<input id="grape" type="checkbox" value="grage" v-model.validity="selected">
<label for="grape">Grape</label>
<input id="banana" type="checkbox" value="banana" v-model.validity="selected">
<label for="banana">Banana</label>
<ul class="errors">
<li v-for="error in result.errors">
<p>{{error.message}}</p>
</li>
</ul>
</validity-group>
<button @click="handleApply">Apply</button>
<p>model value: {{selected}}</p>
</div>
<script>
new Vue({
el: '#app',
data: { selected: [] },
data: {
selected: [],
result: {}
},
computed: {
requiredErrorMsg: function () {
return 'Required fruit !!'
Expand All @@ -52,8 +52,19 @@ <h1>Survey</h1>
maxlengthErrorMsg: function () {
return 'Please chose at most 2 fruits !!'
}
},
methods: {
handleApply: function (e) {
var self = this
var $validity = this.$refs.validity
$validity.validate(function () {
var result = $validity.result
self.result = result
$validity.pass(result.valid)
})
}
}
})
}).$mount('#app')
</script>
</body>
</html>
95 changes: 95 additions & 0 deletions examples/model/component/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>component validation example</title>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="../../../node_modules/vue/dist/vue.js"></script>
<script src="../../../dist/vue-validator.js"></script>
<link href="https://unpkg.com/[email protected]/dist/css/select2.min.css" rel="stylesheet" type="text/css">
<style>
input.invalid { border-color: red; }
.errors { color: red; }
</style>
</head>
<body>
<div id="app">
<validity ref="validity" field="select" :validators="{
selected: { rule: true, message: 'not selected item!!' }
}">
<select2 :options="options" v-model.validity="selected" @input="handleValidate">
<option value="0">----- Select one -----</option>
</select2>
</validity>
<p class="errors" v-if="result.selected">{{result.selected}}</p>
</div>
<script>
new Vue({
data: {
selected: 0,
options: [
{ id: 1, text: 'Hello' },
{ id: 2, text: 'World' }
],
result: {}
},
validators: {
selected: function (val) {
return parseInt(val, 10) !== 0
}
},
components: {
// select2 wrap component
select2: {
template: '<select><slot></slot></select>',
props: ['options', 'value'],
mounted: function () {
var vm = this
$(this.$el)
.val(this.value)
.select2({ data: this.options })
.on('change', function () {
// value: event out
vm.$emit('input', this.value)
})
},
watch: {
value: function (value) {
$(this.$el).select2('val', value)
},
options: function (options) {
$(this.$el).select2({ data: options })
}
},
destroyed: function () {
$(this.$el).off().select2('destroy')
}
}
},
mounted () {
// initial validation
this.validate(this.selected)
},
methods: {
// wrapper method of $validity.validate
validate: function (val, fn) {
var self = this
var $validity = this.$refs.validity
$validity.validate({ validator: 'selected', value: val }, function () {
var result = $validity.result
fn && fn(result)
self.result = result
})
},
handleValidate: function (val) {
var $validity = this.$refs.validity
this.validate(val, function (result) {
$validity.pass()
})
}
}
}).$mount('#app')
</script>
</body>
</html>
75 changes: 44 additions & 31 deletions examples/model/radio/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,48 +2,61 @@
<html>
<head>
<meta charset="utf-8">
<title>v-model validation example for radio button</title>
<script src="../../../node_modules/vue/dist/vue.min.js"></script>
<script src="../../../dist/vue-validator.min.js"></script>
<style> .errors { color: red; }</style>
<title>v-model integration example for radio</title>
<script src="../../../node_modules/vue/dist/vue.js"></script>
<script src="../../../dist/vue-validator.js"></script>
<style>
input.invalid { border-color: red; }
.errors { color: red; }
</style>
</head>
<body>
<div id="app">
<validator name="validation1">
<form novalidate>
<h1>Survey</h1>
<fieldset>
<legend>Which do you like fruit ?</legend>
<input id="apple" type="radio" name="fruit" value="apple" v-model="selected" v-validate:fruits="{
required: { rule: true, message: requiredErrorMsg },
}">
<label for="apple">Apple</label>
<input id="orange" type="radio" name="fruit" value="orange" v-model="selected" v-validate:fruits>
<label for="orange">Orage</label>
<input id="grape" type="radio" name="fruit" value="grage" v-model="selected" v-validate:fruits>
<label for="grape">Grape</label>
<input id="banana" type="radio" name="fruit" value="banana" v-model="selected" v-validate:fruits>
<label for="banana">Banana</label>
<ul class="errors">
<li v-for="error in $validation1.fruits.errors">
<p>{{error.message}}</p>
</li>
</ul>
<pre>$data: {{ $data | json }}</pre>
</fieldset>
</form>
</validator>
<h1>Survey</h1>
<validity-group ref="validity" field="fruits" :validators="{
required: { rule: true, message: requiredErrorMsg }
}">
<legend>Which do you like fruit ?</legend>
<input id="apple" type="radio" name="fruit" value="apple" v-model.validity="selected">
<label for="apple">Apple</label>
<input id="orange" type="radio" name="fruit" value="orange" v-model.validity="selected">
<label for="orange">Orage</label>
<input id="grape" type="radio" name="fruit" value="grage" v-model.validity="selected">
<label for="grape">Grape</label>
<input id="banana" type="radio" name="fruit" value="banana" v-model.validity="selected">
<label for="banana">Banana</label>
<ul class="errors">
<li v-for="error in result.errors">
<p>{{error.message}}</p>
</li>
</ul>
</validity-group>
<button @click="handleApply">Apply</button>
<p>model value: {{selected}}</p>
</div>
<script>
new Vue({
el: '#app',
data: { selected: '' },
data: {
selected: '',
result: {}
},
computed: {
requiredErrorMsg: function () {
return 'Required fruit !!'
}
},
methods: {
handleApply: function (e) {
var self = this
var $validity = this.$refs.validity
$validity.validate(function () {
var result = $validity.result
self.result = result
$validity.pass(result.valid)
})
}
}
})
}).$mount('#app')
</script>
</body>
</html>
73 changes: 44 additions & 29 deletions examples/model/select/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,41 +2,56 @@
<html>
<head>
<meta charset="utf-8">
<title>v-model validation example for select</title>
<script src="../../../node_modules/vue/dist/vue.min.js"></script>
<script src="../../../dist/vue-validator.min.js"></script>
<style>.errors { color: red; }</style>
<title>v-model intergration example for select</title>
<script src="../../../node_modules/vue/dist/vue.js"></script>
<script src="../../../dist/vue-validator.js"></script>
<style>
select.invalid { border-color: red; }
.errors { color: red; }
</style>
</head>
<body>
<div id="app">
<validator name="validation1">
<form novalidate>
<label for="language">select your favorite programming languages</label><br />
<select multiple size="10" v-model="langs" v-validate:lang="{ required: true, maxlength: 3 }">
<option value="javascript">JavaScript</option>
<option value="ruby">Ruby</option>
<option value="python">Python</option>
<option value="perl">Perl</option>
<option value="lua">Lua</option>
<option value="go">Go</option>
<option value="rust">Rust</option>
<option value="elixir">Elixir</option>
<option value="c">C</option>
<option value="none">Not a nothing here</option>
</select>
<div class="errors">
<p v-if="$validation1.lang.required">Required !!</p>
<p v-if="$validation1.lang.maxlength">Sorry, The maximum is 3 languages !!</p>
</div>
<pre>$data: {{ $data | json }}</pre>
</form>
</validator>
<label for="language">select your favorite programming languages</label><br />
<validity ref="validity" field="lang" :validators="{ required: true, maxlength: 3 }">
<select multiple size="10" v-model.validity="langs">
<option value="javascript">JavaScript</option>
<option value="ruby">Ruby</option>
<option value="python">Python</option>
<option value="perl">Perl</option>
<option value="lua">Lua</option>
<option value="go">Go</option>
<option value="rust">Rust</option>
<option value="elixir">Elixir</option>
<option value="c">C</option>
<option value="none">Not a nothing here</option>
</select>
</validity>
<div class="errors">
<p v-if="result.required">Required !!</p>
<p v-if="result.maxlength">Sorry, The maximum is 3 languages !!</p>
</div>
<button @click="handleApply">Apply</button>
<p>model value: {{langs}}</p>
</div>
<script>
new Vue({
el: '#app',
data: { langs: ['javascript', 'lua', 'go'] }
})
data: {
langs: ['javascript', 'lua', 'go'],
result: {}
},
methods: {
handleApply: function (e) {
var self = this
var $validity = this.$refs.validity
$validity.validate(function () {
var result = $validity.result
self.result = result
$validity.pass(result.valid)
})
}
}
}).$mount('#app')
</script>
</body>
</html>
Loading

0 comments on commit 41a9dc6

Please sign in to comment.