0.0.1 • Published 1 year ago
@devsun/vue3-validation-inputs v0.0.1
Vue3 Validation Input
vue3-validation-input is very simple and tiny library for vue3.
It was based on Vue3, typescript, and composition API with <setup>
Setup
npm i @devsun/vue3-validation-input
And dependencies to your main.ts
:
import Vue3ValidationInput from '@devsun/vue3-validation-input';
const app = createApp({...});
app.use(Vue3ValidationInput);
Usage
Component
You can use <validtation-input />
, <validtation-checkbox/>
, <validtation-radio/>
,<validtation-select/>
use validation component:
<validation-input
v-model="form.name"
required
invalid-required-msg="Please enter your name"
>
</validation-input>
Validation
You can validate data using API.
ref
should be added for eash component.
use Composition API style:
<script lang="ts" setup>
import { IValidation } from '@devsun/vue3-validation-input';
const $validation = <IValidation>inject('$validation');
const nameRef = ref(null);
function validate() {
const result = $validation.validate([nameRef]);
// if the result is true, validation comleted, and if it is false, invalid.
}
</script>
<template>
<validation-input
ref="nameRef"
v-model="form.name"
required
invalid-required-msg="Please enter your name"
>
</validation-input>
</template>
Attributes
Name | Type | Default | Target | Description |
---|---|---|---|---|
ref | String | Input, Checkbox, Radio, Select | used for validation API call | |
v-model | String, Number, Boolean, Array | Input, Checkbox, Radio, Select | Required | |
required | Boolean | false | Input, Checkbox, Radio, Select | |
disabled | Boolean | false | Input, Checkbox, Radio, Select | |
reactive | Boolean | true | Input, Checkbox, Radio, Select | Whether to validate when input, blur event occurs |
showInvalidMsg | Boolean | true | Input, Checkbox, Radio, Select | Whether to show invalid message under the input |
format | String, RegExp | Input | ||
invalidRequiredMsg | String | Input, Checkbox, Radio, Select | Displayed message when required attribute is true and no value entered | |
invalidFormatMsg | String | Input | Displayed message when format attribute is exsits and invalid format | |
type | 'text' | 'password' | 'number' | 'date' | 'datetime-local' | 'month' | 'week' | 'time' | 'color' | text | Input | |
placeholder | String | Input, Select | ||
maxlength | String, Number | Input | ||
min | String, Number | Input | Minimum value when type is number, date, datetime-local, month, week, time | |
max | String, Number | Input | Maximum value when type is number, date, datetime-local, month, week, time | |
options | Array | Checkbox, Radio, Select | RequiredOptions of the checkbox, radio, select | |
labelKey | String | Checkbox, Radio, Select | RequiredKey used as label in the option | |
valueKey | String | Checkbox, Radio, Select | RequiredKey used as value in the option | |
mode | 'default' | 'button' | default | Checkbox, Radio |
API
validateData
(refs: Ref[]) => boolean
// if result is true, validation completed, if it is false, exist invalid data.
const result = $validation.validateData([nameRef, emailRef]);
validateDataRef
(refs: Ref[]) => boolean
// Return invalid refs
const invalidRefs = $validation.validateDataRef([nameRef, emailRef]);
// You can use the invalid message as a notification like alert
// and focus on invalid form
if (invalidRefs.length > 0) {
window.alert(invalidRefs[0].value.invalidMsg);
invalidRefs[0].value.focus();
return;
}
Plugin Options
Configure the plugin using a global options:
app.use(Vue3ValidationInput, {
// provide / inject with this key.
key: '$validation',
// Whether to validate when `input, blur` event occurs
reactive: true,
// Whether to show invalid message under the input
showInvalidMsg: true,
});
0.0.1
1 year ago