1.1.0 • Published 8 years ago
vue-form-verify
Installation
npm i vue-form-verify --save
Quick Start
App.vue
<template>
<div>
<v-form :validate="validate" @submit="handleSubmit">
<template scope="api">
<v-form-control field="email" />
<v-form-control field="name" />
<button type="submit" :disabled="api.isInvalid">
submit
</button>
</template>
</v-form>
</div>
</template>
<script>
import { vForm, vFormControl } from 'vue-form-verify';
function validate(values) {
return {
email: /@/.test(values.email)
? undefined
: 'Email is required',
name: values.name && values.name.length
? undefined
: 'Name is required',
}
}
export default {
name: 'app',
components: {
vForm,
vFormControl,
},
methods: {
validate,
handleSubmit(values) {
console.log('submited: ', values)
}
}
}
</script>
API
| form api | description |
|---|
| isValid | return true if no errors |
| isInvalid | return true if has errors |
| getValue(field) | return value by field |
| getValues() | return all values |
| getError(field) | return error by field |
| getErrors() | return all errors |
| getTouched(field) | return touched flag by field |
| setTouched(field, touched) | change touched flag of field |
| setValue(field, newValue) | set new value for field |
| formControl api | description |
|---|
| getValue() | return value |
| getError() | return error |
| getTouched() | return touched flag |
| setTouched(touched) | change touched flag |
| setValue(newValue) | set new value |
Custom input
<template>
<v-form-control :field="field">
<template scope="api">
<my-custom-input
:type="type"
:value="api.getValue()"
:name="field"
@input="api.setValue"
@blur="api.setTouched"
:readonly="api.isReadonly() || readonly"
:disabled="api.isDisabled() || disabled"
:maxlength="maxlength"
:error="api.getTouched() ? api.getError() : undefined"
:placeholder="placeholder"
/>
</template>
</v-form-control>
</template>
<script>
import { vFormControl } from 'vue-form-verify';
export default {
name: 'custom-form-control',
props: {
disabled: Boolean,
readonly: Boolean,
placeholder: String,
maxlength: [String, Number],
type: String,
field: {
type: String,
required: true,
}
},
components: {
vFormControl,
},
}
</script>
<v-form :validate="validate" @submit="handleSubmit">
<template scope="api">
<custom-form-control field="email" />
<custom-form-control field="name" />
<button type="submit" :disabled="api.isInvalid">
submit
</button>
</template>
</v-form>