vue-form
Version:
Form validation for Vue.js
105 lines (88 loc) • 3.68 kB
HTML
<html>
<head>
<title>vue-form example</title>
<meta charset="utf-8" />
<style>
label {
display: block;
margin-bottom: 1.5em;
}
label > span {
display: inline-block;
width: 8em;
vertical-align: top;
}
</style>
</head>
<body>
<form v-form name="myform" @submit.prevent="onSubmit" hook="formHook">
<div class="errors" v-if="myform.$submitted">
<p v-if="myform.name.$error.required">Name is required.</p>
<p v-if="myform.email.$error.email">Email is not valid.</p>
</div>
<label>
<span>Email</span>
<input v-model="model.email" v-form-ctrl name="email" type="email" required />
</label>
<input v-model="model.j" v-form-ctrl name="j" type="number" :min="10" required />
<input v-model="model.k" v-form-ctrl name="k" type="number" max="10" />
<input v-model="model.a" v-form-ctrl name="a" custom-validator="customValidator" placeholder="a" />
<input v-model="model.b" v-form-ctrl name="b" custom-validator="customValidator" placeholder="b" required />
<input v-model="model.c" v-form-ctrl name="c" pattern="\w\w" placeholder="c" />
<input v-model="model.d" v-form-ctrl name="d" pattern="\w\w" placeholder="d" required />
<input v-model="model.e" v-form-ctrl name="e" type="email" placeholder="e" />
<input v-model="model.f" v-form-ctrl name="f" type="email" placeholder="f" required />
<button type="submit">Submit</button>
</form>
<pre>{{ myform | json }}</pre>
<form name="myForm" v-form>
<input v-form-ctrl v-model="foobar" name="foobar" placeholder="foobar" required />
<input v-form-ctrl v-model="foobar2" name="foobar2" placeholder="foobar2" />
<input v-form-ctrl v-model="foobar3" name="foobar3" type="email" placeholder="foobar3" required />
<input v-form-ctrl v-model="foobar4" name="foobar4" minlength="2" placeholder="foobar4" />
<input v-form-ctrl v-model="foobar5" name="foobar5" type="number" min="1" placeholder="foobar5" />
<button type="submit">Submit</button>
<pre>{{myForm | json }}</pre>
</form>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../vue-form.js"></script>
<script>
var vm = new Vue({
el: 'body',
data: {
myform: {},
model: {
contactRequired: false ,
// email: 'dfdf'
}
},
methods: {
onSubmit: function () {
console.log(this.myform.$valid);
},
formHook: function (form) {
this.form = form;
}
},
ready: function () {
setTimeout(function (){
vm.model = {
a: 'foo'
};
vm.$nextTick(function () {
vm.form.setPristine();
});
//console.log(vm.form);
}, 200);
}
});
window.setPristine = function () {
vm.form.setPristine();
}
window.setUntouched = function () {
vm.form.setUntouched();
}
</script>
</body>
</html>