介紹

Vue Formulate是使用Vue構(gòu)建表單的最簡單方法。主要功能包括表單和字段驗(yàn)證，文件上傳，表單生成，支持標(biāo)簽的單元素輸入，幫助文本，錯(cuò)誤消息，占位符等，以及在自己的項(xiàng)目中使用的全面文檔。

Github

https://github.com/wearebraid/vue-formulate

特性

• 開發(fā)者幸福

表單無處不在，但對于作者來說卻令人厭煩—不再了。Vue Formulate為開發(fā)人員提供了強(qiáng)大而靈活的API，使復(fù)雜的表單創(chuàng)建變得輕而易舉。

• 單個(gè)輸入元素

使用Vue Formulate，無需記住十幾個(gè)組件的名稱-所有表單元素都是由單個(gè)組件創(chuàng)建的。簡單！

• 內(nèi)置驗(yàn)證

開箱即用的驗(yàn)證非常簡單，可以處理95％的用例。幫助文本，驗(yàn)證規(guī)則和驗(yàn)證消息是簡單的工具。也可以添加自定義驗(yàn)證。

• 插件系統(tǒng)

通過插件系統(tǒng)，擴(kuò)展Vue Formulate的功能或在項(xiàng)目中重復(fù)使用自定義輸入，驗(yàn)證規(guī)則和消息。使您的插件開源，與他人共享！

• 生成表格

從JSON字符串生成整個(gè)表單。由于Vue Formulate使用單個(gè)輸入組件，因此可以輕松地遍歷數(shù)組并動(dòng)態(tài)生成表單。

• 自己的風(fēng)格

Vue Formulate具有簡單的語義類，可輕松完成樣式輸入。滾動(dòng)自己的樣式或選擇我們預(yù)先內(nèi)置的主題之一。

實(shí)例代碼

• 表格驗(yàn)證

Vue Formulate包含20條規(guī)則并支持定義自己的規(guī)則

<FormulateInput type="email" label="請輸入校園郵箱?" validation="required|email|ends_with:.edu" validation-name="教育郵箱" placeholder="user@aaa.edu"/>

• 單元素輸入

type="radio"為checkbox或select

type="radio"為checkbox或select<FormulateInput type="radio" label="你認(rèn)為Vue Formulate怎么樣?" :options="{ good: 'It’s good', great: 'It’s great', install: 'I’m installing it now.' }"/>

• 開箱即用文件上傳

開箱即用，文件上傳效果很好

<FormulateInput type="image" label="畫廊" validation="mime:image/jpeg,image/jpg,image/png" help="幫助文字" multiple/>

• 使用一個(gè)對象為整個(gè)表單建模

<template> <FormulateForm v-model="values"> <FormulateInput type="email" name="email" label="你的電子郵箱是什么？" validation="required|email" placeholder="jon@example.com" /> <FormulateInput name="flavor" type="checkbox" label="您喜歡哪種口味的冰淇淋？?" validation="required|min:1" :options="{ vanilla: '原味', chocolate: '巧克力', strawberry: '草莓', pineapple: '菠蘿'}" /> <FormulateInput type="submit" /> <pre>{{ values }}</pre> </FormulateForm></template><script>export default { data () { return { values: {} } }}</script>

總結(jié)

Vue Formulate是一個(gè)優(yōu)秀的Vue表單構(gòu)建工具，以非常簡單的方式構(gòu)建非常復(fù)雜的表單元素，enjoy it！