Using yarn:
$ yarn add @team-decorate/vue3-validate-plugin
Once the package is installed, you can import the library using import
approach:
import { ValidatePlugin, useValidate, ValidateWrap } from '@team-decorate/vue3-validate-plugin'
How to install to app:
Note: Insert exception You can insert your own error by passing registerError as an option. Please register with IRegisterError type
import {createApp} from 'vue'
import App from '@/App.vue'
import axios from 'axios'
import {ValidatePlugin} from '@team-decorate/vue3-validate-plugin'
const app = createApp(App)
app.use(ValidatePlugin, {
axios: axios,
registerError: [
{codeCondition: (n) => n == 430, error: PermissionError}
], //optional
})
How to use ValidateWrap:
<script setup lang="ts">
import {ValidateWrap, ValidateError, useValidate} from '@team-decorate/vue3-validate-plugin'
import axios from 'axios'
const {setValidError} = useValidate()
const submit = async () => {
try {
await axios.post('/api/some', data)
} catch (e) {
if (e instanceof ValidateError) {
setValidError(e)
}
}
}
</script>
<template>
<validate-wrap>
<div class="mb-3">
<label>name</label>
<input v-model="user.name" class="form-control" data="name">
</div>
<div class="mt-3">
<label>email</label>
<input v-model="user.email" class="form-control" data="email">
</div>
</validate-wrap>
<button @click="submit">submit</button>
</template>
Name | default | description |
---|---|---|
attributeField | data | key to detect validate error |