FormVuelar is a set of predefined vue form components which are designed to automatically display errors coming back from your backend. It works out of the box with the error message bag that is returned by Laravel when submitting an ajax form.
FormVuelar是一组预定义的Vue表单组件,旨在自动显示从后端返回的错误。 它具有开箱即用的功能,并带有Laravel在提交ajax表单时返回的错误消息包。
- Works out of the box with Laravel
- Axios integration
- File upload support including process indicator
- Dropzone with image preview (inspired by FilePont)
- Display validation error messages from error response
npm install formvuelar --save
The following components are shipped with FormVuelar:
FormVuelar随附了以下组件:
Name | Description | Import Name |
---|---|---|
|
Form wrapper element | import { FvlForm } from 'formvuelar' |
|
Input field | import { FvlInput } from 'formvuelar' |
|
Text area field | import { FvlTextarea } from 'formvuelar' |
|
Radio input field | import { FvlRadio } from 'formvuelar' |
|
Check box input field | import { FvlCheckbox } from 'formvuelar' |
|
Select input field | import { FvlSelect } from 'formvuelar' |
|
File input field | import { FvlFile } from 'formvuelar' |
|
Multi file input field | import { FvlMultiFile } from 'formvuelar' |
|
Dropzone field | import { FvlDropzone } from 'formvuelar' |
|
Submit button | import { FvlSubmit } from 'formvuelar' |
名称 | 描述 | 汇入名称 |
---|---|---|
|
表单包装器元素 | import { FvlForm } from 'formvuelar' |
|
输入栏 | import { FvlInput } from 'formvuelar' |
|
文字区域栏位 | import { FvlTextarea } from 'formvuelar' |
|
无线电输入栏 | import { FvlRadio } from 'formvuelar' |
|
复选框输入栏 | import { FvlCheckbox } from 'formvuelar' |
|
选择输入栏 | import { FvlSelect } from 'formvuelar' |
|
文件输入栏 | import { FvlFile } from 'formvuelar' |
|
多文件输入栏 | import { FvlMultiFile } from 'formvuelar' |
|
Dropzone字段 | import { FvlDropzone } from 'formvuelar' |
|
提交按钮 | import { FvlSubmit } from 'formvuelar' |
Name | Prop/Event | Type | Default | Possible values | Notes |
---|---|---|---|---|---|
fvl-form | :method | String | 'post' | get |post |put |patch |delete |
|
:data | Object | {} | {} | ||
:url | String | null | |||
:multipart | Boolean | false | true |false |
||
@success | Function | axios response | |||
@error | Function | axios error response | |||
@upload-progress | Function | 0-100 | |||
fvl-input | :value.sync | Data | '' | form.name |
|
:id | String | null | |||
:name | String | '' | |||
:label | String | null | |||
:type | String | 'text' | |||
:placeholder | String | null | |||
:autocomplete | String | null | |||
:field-class | String | null | |||
:min | Number | null | |||
:max | Number | null | |||
:size | Number | null | |||
:step | Number | null | |||
:required | Boolean | false | true |false |
||
:readonly | Boolean | false | true |false |
||
:disabled | Boolean | false | true |false |
||
:pattern | String | null | regex | ||
fvl-textarea | :value.sync | Data | '' | form.about |
|
:id | String | null | |||
:name | String | '' | |||
:label | String | null | |||
:placeholder | String | null | |||
:autocomplete | String | null | |||
:field-class | String | null | |||
:cols | Number | null | |||
:maxlength | Number | null | |||
:rows | Number | null | |||
:wrap | Boolean | null | hard |soft |
||
:required | Boolean | false | true |false |
||
:readonly | Boolean | false | true |false |
||
:disabled | Boolean | false | true |false |
||
:pattern | String | null | regex | ||
fvl-select | :selected.sync | Data | null | form.favoriteColor |
|
:options | Object | {} | {'key': 'value', ...} |
||
:id | String | null | |||
:name | String | '' | |||
:label | String | null | |||
:allow-empty | Boolean | false | true |false |
||
:placeholder | String | null | |||
:autocomplete | String | null | |||
:required | Boolean | false | true |false |
||
:readonly | Boolean | false | true |false |
||
:disabled | Boolean | false | true |false |
||
fvl-radio | :checked.sync | Data | null | form.newsletter |
|
:options | Object | {} | {'key': 'value', ...} |
||
:id | String | null | |||
:name | String | '' | |||
:label | String | null | |||
:required | Boolean | false | true |false |
||
:readonly | Boolean | false | true |false |
||
:disabled | Boolean | false | true |false |
||
fvl-checkbox | :checked.sync | Data | null | form.terms |
|
:id | String | null | |||
:name | String | '' | |||
:label | String | null | |||
:required | Boolean | false | true |false |
||
:readonly | Boolean | false | true |false |
||
:disabled | Boolean | false | true |false |
||
fvl-file | :file.sync | Data | null | form.avatar |
|
:id | String | null | |||
:name | String | '' | |||
:label | String | null | |||
:required | Boolean | false | true |false |
||
:readonly | Boolean | false | true |false |
||
:disabled | Boolean | false | true |false |
||
fvl-multi-file | :files.sync | Data | null | form.gallery |
|
:id | String | null | |||
:name | String | '' | |||
:label | String | null | |||
:required | Boolean | false | true |false |
||
:readonly | Boolean | false | true |false |
||
:disabled | Boolean | false | true |false |
||
fvl-dropzone | :files.sync | Data | null | form.media |
|
:id | String | null | |||
:name | String | '' | |||
:label | String | null | |||
:required | Boolean | false | true |false |
||
:readonly | Boolean | false | true |false |
||
:disabled | Boolean | false | true |false |
||
fvl-submit | :loader | Boolean | false | true |false |
|
:disabled | Boolean | false | true |false |
名称 | 道具/活动 | 类型 | 默认 | 可能的值 | 笔记 |
---|---|---|---|---|---|
形式 | :方法 | 串 | “发布” | get post | put | patch | delete |
|
:数据 | 目的 | {} | {} | ||
:url | 串 | 空值 | |||
:多部分 | 布尔型 | 假 | true | false |
||
@成功 | 功能 | 轴距响应 | |||
@错误 | 功能 | Axios错误响应 | |||
@ upload-progress | 功能 | 0-100 | |||
fvl输入 | :value.sync | 数据 | '' | form.name |
|
:ID | 串 | 空值 | |||
:名称 | 串 | '' | |||
:标签 | 串 | 空值 | |||
:类型 | 串 | '文本' | |||
:占位符 | 串 | 空值 | |||
:自动完成 | 串 | 空值 | |||
:领域课 | 串 | 空值 | |||
:分钟 | 数 | 空值 | |||
:最大 | 数 | 空值 | |||
:尺寸 | 数 | 空值 | |||
:步 | 数 | 空值 | |||
:需要 | 布尔型 | 假 | true | false |
||
:只读 | 布尔型 | 假 | true | false |
||
:禁用 | 布尔型 | 假 | true | false |
||
:模式 | 串 | 空值 | 正则表达式 | ||
fvl文本区域 | :value.sync | 数据 | '' | form.about |
|
:ID | 串 | 空值 | |||
:名称 | 串 | '' | |||
:标签 | 串 | 空值 | |||
:占位符 | 串 | 空值 | |||
:自动完成 | 串 | 空值 | |||
:领域课 | 串 | 空值 | |||
:cols | 数 | 空值 | |||
:最长长度 | 数 | 空值 | |||
:行 | 数 | 空值 | |||
:包 | 布尔型 | 空值 | hard soft |
||
:需要 | 布尔型 | 假 | true | false |
||
:只读 | 布尔型 | 假 | true | false |
||
:禁用 | 布尔型 | 假 | true | false |
||
:模式 | 串 | 空值 | 正则表达式 | ||
fvl选择 | :selected.sync | 数据 | 空值 | form.favoriteColor |
|
:选项 | 目的 | {} | {'key': 'value', ...} |
||
:ID | 串 | 空值 | |||
:名称 | 串 | '' | |||
:标签 | 串 | 空值 | |||
:允许空 | 布尔型 | 假 | true | false |
||
:占位符 | 串 | 空值 | |||
:自动完成 | 串 | 空值 | |||
:需要 | 布尔型 | 假 | true | false |
||
:只读 | 布尔型 | 假 | true | false |
||
:禁用 | 布尔型 | 假 | true | false |
||
广播电台 | :checked.sync | 数据 | 空值 | form.newsletter |
|
:选项 | 目的 | {} | {'key': 'value', ...} |
||
:ID | 串 | 空值 | |||
:名称 | 串 | '' | |||
:标签 | 串 | 空值 | |||
:需要 | 布尔型 | 假 | true | false |
||
:只读 | 布尔型 | 假 | true | false |
||
:禁用 | 布尔型 | 假 | true | false |
||
fvl复选框 | :checked.sync | 数据 | 空值 | form.terms |
|
:ID | 串 | 空值 | |||
:名称 | 串 | '' | |||
:标签 | 串 | 空值 | |||
:需要 | 布尔型 | 假 | true | false |
||
:只读 | 布尔型 | 假 | true | false |
||
:禁用 | 布尔型 | 假 | true | false |
||
fvl文件 | :file.sync | 数据 | 空值 | form.avatar |
|
:ID | 串 | 空值 | |||
:名称 | 串 | '' | |||
:标签 | 串 | 空值 | |||
:需要 | 布尔型 | 假 | true | false |
||
:只读 | 布尔型 | 假 | true | false |
||
:禁用 | 布尔型 | 假 | true | false |
||
fvl多文件 | :files.sync | 数据 | 空值 | form.gallery |
|
:ID | 串 | 空值 | |||
:名称 | 串 | '' | |||
:标签 | 串 | 空值 | |||
:需要 | 布尔型 | 假 | true | false |
||
:只读 | 布尔型 | 假 | true | false |
||
:禁用 | 布尔型 | 假 | true | false |
||
fv-dropzone | :files.sync | 数据 | 空值 | form.media |
|
:ID | 串 | 空值 | |||
:名称 | 串 | '' | |||
:标签 | 串 | 空值 | |||
:需要 | 布尔型 | 假 | true | false |
||
:只读 | 布尔型 | 假 | true | false |
||
:禁用 | 布尔型 | 假 | true | false |
||
fvl提交 | :加载器 | 布尔型 | 假 | true | false |
|
:禁用 | 布尔型 | 假 | true | false |
Create a form and sent it via post request to your server.
创建一个表单,然后通过邮寄请求将其发送到您的服务器。
Validate
The form object you pass into the form component above would look like this:
您传递到上述表单组件中的表单对象将如下所示:
import { FvlForm, FvlInput, FvlTextarea, FvlRadio, FvlSubmit } from 'formvuelar'
...
components: {
FvlForm,
FvlInput,
FvlTextarea,
FvlRadio,
FvlSubmit,
},
data() {
return {
form: {
fullname: '',
bio: '',
pet: ''
},
...
The response from your Backend should contain a Json error object and have a status of 422 in order to show the error messages below the input fields. This response format is default for Laravel and will work out of the box.
来自后端的响应应包含一个Json错误对象,并且状态为422,以便在输入字段下方显示错误消息。 Laravel默认使用此响应格式,并且开箱即用。
{
"message": "The given data was invalid.",
"errors": {
"field-1": [
"Error 1",
"Error 2"
],
"field-2": [
"Error 1",
"Error 2"
]
}
}
You can still use the default HTML5 validation rules for all input fields like 'accept' and 'required' for file inputs:
对于文件输入,您仍然可以对所有输入字段(例如“ accept”和“ required”)使用默认HTML5验证规则:
The styling is totally up to you. All components have their own classes so you have full control over the look and feel of every component.
样式完全取决于您。 所有组件都有自己的类,因此您可以完全控制每个组件的外观。
Every component is wrapped with a div and the corresponding class .fvl-{type}-wrapper. Labels have a class name of .fvl-{type}-label. The field itself has a class name of .fvl-{type}
每个组件都包装有一个div和相应的类.fvl- {type} -wrapper。 标签的类名称为.fvl- {type} -label。 该字段本身的类名称为.fvl- {type}
.fvl-input-wrapper {
@apply p-2;
}
.fvl-input-label {
@apply block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2;
}
.fvl-input {
@apply appearance-none block w-full bg-grey-lighter text-grey-darkest border border-grey-lighter rounded py-3 px-4 leading-tight;
}
I'm using Tailwind CSS for the examples. Feel free to use the predefined css component classes for your own projects.
我在示例中使用Tailwind CSS 。 随意为您自己的项目使用预定义CSS组件类。
- Advanced select component with search and remote source option
- Tags component
翻译自: https://vuejsexamples.com/vue-form-components-with-server-side-validation-in-mind/