考虑服务器端验证的Vue表单组件

形式Vuelar (FormVuelar)

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表单时返回的错误消息包。

View Demo 查看演示 Download Source 下载源

特征 (Features)

- 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

入门 (Getting Started)

npm install formvuelar --save

可用组件 (Available Components)

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'

组件道具和活动 (Components Props & Events)

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

基本表格模板 (Basic Form Template)

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: ''
            },
        ...

错误回应 (Error Response)

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"
    ]
  }
}

客户端验证 (Client side validation)

You can still use the default HTML5 validation rules for all input fields like 'accept' and 'required' for file inputs:

对于文件输入，您仍然可以对所有输入字段(例如“ accept”和“ required”)使用默认HTML5验证规则：

造型 (Styling)

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}

文本输入组件的示例类(使用Tailwind) (Example classes of the text input component (using Tailwind))

.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组件类。

去做 (TODO)

- Advanced select component with search and remote source option
- Tags component

翻译自: https://vuejsexamples.com/vue-form-components-with-server-side-validation-in-mind/