<div id="app">
<v-form @submit="onSubmit">
<v-field name="email" as="input" :rules="validateEmail" type="email"></v-field>
<error-message name="email"></error-message>
<button>Sign up</button>
</v-form>
</div>
span {
display: block;
margin: 10px 0;
}
const App = {
components: {
// Field and Form Components were renamed to avoid browser conflicts with `form` and `field` elements.
VForm: VeeValidate.Form,
VField: VeeValidate.Field,
ErrorMessage: VeeValidate.ErrorMessage,
},
methods: {
onSubmit(values) {
alert(JSON.stringify(values, null, 2));
},
validateEmail(value) {
// if the field is empty
if (!value) {
return 'This field is required';
}
// if the field is not a valid email
if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) {
return 'This field must be a valid email';
}
// All is good
return true;
},
},
};
Vue.createApp(App).mount('#app')
This Pen doesn't use any external CSS resources.