整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
迎大神評(píng)論指正！歡迎關(guān)注前端小白一鍋！
我們?cè)趧?chuàng)建表單的時(shí)候主要用到的表單控件有<form>、<input>、<select>、<textarea>、<fieldset>、<button>等，本文將列出在JavaScript中操作這些表單控件時(shí)會(huì)用到的一些屬性和方法。
在HTML中，表單是由<form>元素來(lái)表示的，而在JavaScript中，表單對(duì)應(yīng)的則是HTMLFormElement類(lèi)型，它繼承自HTMLElement類(lèi)型，與其他HTML元素具有相同繁榮默認(rèn)屬性，但我們重點(diǎn)要關(guān)注的是它自己獨(dú)有的屬性和方法。
acceptCharset屬性表示服務(wù)器能夠處理的字符集；
action屬性表示接受請(qǐng)求的服務(wù)器URL；
elements屬性表示表單中所有控件的集合；
enctype屬性表示請(qǐng)求編碼的類(lèi)型；
length屬性表示表單中控件的數(shù)量；
method屬性表示將要發(fā)送的http請(qǐng)求類(lèi)型，通常是“get”或“post”；
name屬性表示表單的名稱(chēng)；
autocomplete 屬性規(guī)定輸入字段是否應(yīng)該啟用自動(dòng)完成功能。有兩個(gè)取值“on”（表示啟用）“off”表示關(guān)閉。自動(dòng)完成允許瀏覽器預(yù)測(cè)對(duì)字段的輸入。當(dāng)用戶在字段開(kāi)始鍵入時(shí)，瀏覽器基于之前鍵入過(guò)的值，應(yīng)該顯示出在字段中填寫(xiě)的選項(xiàng)。
reset（）方法可以將所有表單域重置為默認(rèn)值；
submit（）方法可以提交表單；
checkValidity（）方法可以顯示的驗(yàn)證表單；
html For屬性用于關(guān)聯(lián)表單控件的激活行為（可使點(diǎn)擊label與點(diǎn)擊表單控件的行為一致），可關(guān)聯(lián)的元素有下列（ 設(shè)置了hidden的表單控件無(wú)法關(guān)聯(lián)）：button、input、keygen、meter、output、progress、select、textarea；
form屬性，可以修改元素的form屬性為相關(guān)聯(lián)表單Id（同時(shí)元素中對(duì)應(yīng)的 for屬性也應(yīng)該修改）。但是更改form屬性之后label并不能自動(dòng)綁定到新表單對(duì)應(yīng)的元素上，label.set Attribute('form','new Form Id');
type屬性可用于控制表單控件的外觀以及數(shù)據(jù)類(lèi)型（默認(rèn)為text），在不同的瀏覽器不同數(shù)據(jù)類(lèi)型有不同的展示效果。
該元素用于指定選項(xiàng)表中需要選擇的選項(xiàng)。主要有三個(gè)子標(biāo)簽select（構(gòu)建選項(xiàng)表）、optgroup（選項(xiàng)分組）、option（選項(xiàng)內(nèi)容）。
多行文本框，其屬性和方法如下：
name屬性表示文本框名；
value屬性存儲(chǔ)用戶輸入信息；
select()方法用于全選當(dāng)前輸入的內(nèi)容；
selectionStart屬性表示選中的內(nèi)容的起始位置，無(wú)選中時(shí)返回當(dāng)前光標(biāo)所在位置；
selectionEnd屬性表示選中內(nèi)容結(jié)束位置，無(wú)選中時(shí)返回光標(biāo)位置；
selection Direction屬性表示文本選取方向（取值為forward或backward）；
setSelectionRange(start,end[,direction])（使用程序選中內(nèi)容）
setRangeText(replacement[,start,end,[mode]])（設(shè)置內(nèi)容范圍）
需要注意的是這些屬性和方法都是JavaScript調(diào)用DOM對(duì)象接口修改表單控件結(jié)構(gòu)或外觀時(shí)使用的，他們與HTML中表單相關(guān)元素標(biāo)簽及其屬性是一一對(duì)應(yīng)的。
收藏轉(zhuǎn)發(fā)請(qǐng)先關(guān)注，原創(chuàng)不易，謝謝支持！
嘍哈嘍，大家好。
今天和大家分享一下，在vue中，如果高效的開(kāi)發(fā)表單。
首先我們來(lái)確定表單的功能，表單主要是用來(lái)收集用戶數(shù)據(jù)的信息，然后提交后臺(tái)。也就是需要在頁(yè)面上提供一些列的輸入框，用戶完成輸入后，通過(guò)提交按鈕，觸發(fā)表單驗(yàn)證，驗(yàn)證不通過(guò)則提示錯(cuò)誤，驗(yàn)證通過(guò)則將收集的信息發(fā)送給后臺(tái)，后臺(tái)處理完成后，提示前端成功還是失敗。按照業(yè)務(wù)功能來(lái)說(shuō)，表單分為新建和編輯兩種，其中數(shù)據(jù)驗(yàn)證，提交的邏輯都是一樣的，只是編輯的場(chǎng)合，事先需要根據(jù)記錄的ID加載待編輯的數(shù)據(jù) 來(lái)填充表單。然后 編輯的提交 通常 是增量修改，就是只提交變化的部分。
以往我們開(kāi)發(fā)表單，需要完成以下幾個(gè)步驟。
1. 構(gòu)建layout，就是準(zhǔn)備各種輸入框，備選項(xiàng)（單選按鈕、復(fù)選按鈕、下拉列表），確定報(bào)錯(cuò)消息展示的位置。
2. 表單驗(yàn)證
3. 表單數(shù)據(jù)提交，提交之前可能需要對(duì)待提交的數(shù)據(jù)做一下處理，以滿足接口要求。
在vue環(huán)境中，大家可能首先會(huì)想到用element-ui，因?yàn)樗阑溯斎虢M件，定義來(lái)標(biāo)準(zhǔn)form的開(kāi)發(fā)模式，提供了表單驗(yàn)證的功能，使用element-ui可以幫大家開(kāi)發(fā)出簡(jiǎn)約大方的form表單。
下圖是一個(gè)典型的element-ui的form
這里是上面表單的layout部分的代碼截圖
下面是它的表單驗(yàn)證的部分
具體請(qǐng)參考element-ui的官方文檔
https://element.eleme.cn/#/zh-CN/component/form
可以說(shuō)element-ui在很大程度上，幫大家用最少的代碼 完成了產(chǎn)品級(jí)表單頁(yè)面的開(kāi)發(fā)。但是我們依然要處理大量的layout的代碼，而這些代碼看起來(lái)都是重復(fù)的代碼，自己寫(xiě)雖然靈活度高，但是有沒(méi)有辦法自動(dòng)完成呢。而且使用element-ui我們依然是要處理表單提交，以及編輯時(shí)候的數(shù)據(jù)拉取，這些事實(shí)上在各個(gè)表單中，也都是雷同的工作，不同的表單，處理方式應(yīng)該都是一樣的，僅僅是 提交數(shù)據(jù)的接口不一樣，基于這個(gè)總結(jié)，我們可以做一個(gè) 表單組件，通過(guò)url指定要提交數(shù)據(jù)的位置，通過(guò)inputs傳入表單輸入項(xiàng)目的定義，然后讓這個(gè)form組件 自動(dòng)完成layout繪制，數(shù)據(jù)拉取，表單驗(yàn)證，數(shù)據(jù)提交等一些列動(dòng)作。
tsyvue中定義的 sy-form表單就完成了我上面描述的工作。
http://tsy.zone/tsyvue/sy-form
tsyvue是為了進(jìn)一步簡(jiǎn)化項(xiàng)目開(kāi)發(fā)，根據(jù)本人多年的開(kāi)發(fā)經(jīng)驗(yàn)，提煉出項(xiàng)目中大量的共通代碼形成的擴(kuò)展組件庫(kù)，通過(guò)npm發(fā)布，大家可以在自己的vue工程下運(yùn)行以下命令來(lái)安裝
npm install tsyvue -S
通過(guò)tsyvue的sy-form構(gòu)建一個(gè)用來(lái) 新建數(shù)據(jù)據(jù)的表單，layout的部分只要提供如下代碼即可。
sy-form(:inputs='formInputs' url='/example/form/url')
這里模板部分使用的pug語(yǔ)言，相較html更加簡(jiǎn)潔。
可以看到，sy-form僅僅接收了一個(gè)url，表示最終數(shù)據(jù)要提交的位置。以及inputs，定了表單輸入項(xiàng)目，剩下繪制表單，驗(yàn)證數(shù)據(jù)，提交數(shù)據(jù)，就都交給sy-form來(lái)完成了。
下面時(shí)input定義的例子
目前sy-from能夠滿足大部分場(chǎng)景的需求，下圖時(shí)基于sy-form繪制的表單的例子。
可以看到支持input radio select checkbox datepicker等多種輸入框，這里面的 單選按鈕 多選按鈕 下拉框 都是 tsyvue 的 sy-options組件渲染的，具體如何使用，請(qǐng)參考tsyvue的文檔，并下載例子調(diào)試
sy-options是備選項(xiàng)，可以通過(guò)type指定外觀，外觀 支持 下拉列表，單選按鈕，復(fù)選按鈕等，有單選和多選模式，至此從接口獲取備選項(xiàng)，或者前端提供備選項(xiàng)。詳細(xì)用法請(qǐng)參考http://tsy.zone/tsyvue/sy-options
總體介紹一下大概的架構(gòu)和核心模塊設(shè)計(jì)。先上一張整體設(shè)計(jì)圖
概念還是有點(diǎn)多，有一些概念可能比較新，如果熟悉K2自定義表單，可能比較好理解一些。
對(duì)核心的一些功能模塊進(jìn)行總體介紹如下(用.net core實(shí)現(xiàn)，其他語(yǔ)言整體設(shè)計(jì)思路相差不大)
基礎(chǔ)設(shè)施：
自定義表單主要涉及到數(shù)據(jù)存儲(chǔ)，包括表單定義信息和真實(shí)的業(yè)務(wù)表存儲(chǔ)管理，可支持不同的數(shù)據(jù)庫(kù)存儲(chǔ)，Redis主要用在緩存更新通知上，Redis不存儲(chǔ)表單定義緩存
基礎(chǔ)組件：
表單基礎(chǔ)框架，.net core實(shí)現(xiàn)，用Dapper做ORM存儲(chǔ)，封裝了UnitOfWork，另外還包括了模塊管理、租戶/應(yīng)用管理等基礎(chǔ)功能，不包括權(quán)限相關(guān)功能。
表單定義信息對(duì)于自定義表單來(lái)說(shuō)，訪問(wèn)特別的頻繁，真實(shí)業(yè)務(wù)變更極少，需要不少的過(guò)濾查詢，如果存儲(chǔ)到Redis，涉及到頻繁的訪問(wèn)以及數(shù)據(jù)過(guò)濾，對(duì)整體性能影響也比較大，所以這里考慮把表單定義信息存儲(chǔ)到每一個(gè)應(yīng)用程序內(nèi)存中，直接從內(nèi)存中訪問(wèn)表單定義信息，表單定義信息改變時(shí)，通知所有應(yīng)用表單定義對(duì)應(yīng)的數(shù)據(jù)已經(jīng)更新，應(yīng)用程序讀取數(shù)據(jù)時(shí)，會(huì)從數(shù)據(jù)庫(kù)讀取最新的數(shù)據(jù)存儲(chǔ)到內(nèi)存中。表單定義信息還會(huì)存儲(chǔ)到瀏覽器Indexdb中，一條總的原則就是訪問(wèn)自定義表單定義信息一定要快，就近獲取。
數(shù)據(jù)字典(用戶信息)也可以存儲(chǔ)到本地緩存，管理方式同表單定義本地緩存，數(shù)據(jù)字典變更極少，訪問(wèn)大；業(yè)務(wù)表往往只存儲(chǔ)用戶Id，展示需要用戶名稱(chēng)，所以也存儲(chǔ)到本地緩存中。
修改了表單定義信息或者數(shù)據(jù)字典等，通過(guò)Redis通知所有應(yīng)用程序清空本地緩存，再次讀取數(shù)據(jù)時(shí)，應(yīng)用程序從數(shù)據(jù)庫(kù)或者接口讀取數(shù)據(jù)再填充到內(nèi)存中。如果檢測(cè)到Redis斷開(kāi)連接，則直接從數(shù)據(jù)庫(kù)或者接口讀取數(shù)據(jù)，待Redis恢復(fù)，再?gòu)膬?nèi)存讀取數(shù)據(jù)。Redis可由其他有發(fā)布訂閱中間件服務(wù)替換。
只提供接口定義，對(duì)接具體的框架實(shí)現(xiàn)具體的邏輯，比如框架使用Abp框架，則從Abp的ICurrentUser讀取用戶當(dāng)前用戶信息。
暫時(shí)未遷移，見(jiàn)作者其他博客描述。
對(duì)自定義表單數(shù)據(jù)在租戶和應(yīng)用級(jí)別進(jìn)行隔離，以支持Saas服務(wù)。
Sprite Comon：
自定義表單公共組件/模塊
自定義表單比較核心的內(nèi)容之一，所有對(duì)業(yè)務(wù)表的常規(guī)CRUD，都是通過(guò)動(dòng)態(tài)拼接Sql語(yǔ)句完成以及動(dòng)態(tài)參數(shù)，這里面涉及到大量的JObject操作，也就是開(kāi)發(fā)者用得比較多的Newtonsoft.Json組件部分內(nèi)容。
對(duì)Sql的參數(shù)查詢，查詢條件定義為一棵查詢樹(shù)，然后根據(jù)樹(shù)完成Sql查詢條件Where子句的字符串拼接。
也是一棵樹(shù)，每一個(gè)節(jié)點(diǎn)為一種函數(shù)或者取值，比如邏輯表達(dá)式、日期轉(zhuǎn)換函數(shù)、從方法獲取值、固定值等，根據(jù)根節(jié)點(diǎn)類(lèi)型返回對(duì)應(yīng)動(dòng)態(tài)值
自定義表單靈魂所在，有了表單規(guī)則定義，才能稱(chēng)之為表單引擎，可定義視圖或者表單規(guī)則；
比如用戶列表視圖新增按鈕點(diǎn)擊事件，部門(mén)樹(shù)用戶列表表單部門(mén)樹(shù)視圖樹(shù)節(jié)點(diǎn)選中節(jié)點(diǎn)變化事件，用戶列表視圖彈出對(duì)話框保存事件等，可以是視圖/表單本身或者控件觸發(fā)，也可以是子表單/子視圖本身或者控件觸發(fā)
當(dāng)某一個(gè)規(guī)則定義的事件被觸發(fā)，可定義執(zhí)行一系列執(zhí)行動(dòng)作，比如"用戶列表視圖新增按鈕點(diǎn)擊事件"觸發(fā)時(shí)，定義執(zhí)行設(shè)置用戶列表選中部門(mén)參數(shù)、獲取用戶列表查詢參數(shù)定義、執(zhí)行后端獲取用戶分頁(yè)數(shù)據(jù)方法、將執(zhí)行結(jié)果傳遞給用戶列表等一系列動(dòng)作。再比如"用戶列表視圖彈出對(duì)話框保存事件"事件觸發(fā),驗(yàn)證用戶Item視圖、驗(yàn)證通過(guò)
自定義表單不需要寫(xiě)代碼，則驗(yàn)證就顯得非常的重要了，定義時(shí)各個(gè)模型之前數(shù)據(jù)是否正確，規(guī)則定義是否正確，運(yùn)行時(shí)參數(shù)等是否正確等
表單定義存儲(chǔ)往往是結(jié)構(gòu)化的數(shù)據(jù)，很多定義信息可能以字符串的方式存儲(chǔ)，但JS前端往往需要Json數(shù)據(jù)，則需要進(jìn)行序列化與反序列化操作。
Sprite Object：
自定義表單對(duì)象管理，包括對(duì)象、屬性、方法
Object管理與業(yè)務(wù)表需要完全同步，添加Object時(shí)，需要?jiǎng)討B(tài)生成業(yè)務(wù)表的創(chuàng)建Sql語(yǔ)句，并在業(yè)務(wù)庫(kù)中創(chuàng)建具體業(yè)務(wù)表，業(yè)務(wù)表名稱(chēng)與Object的Name字段對(duì)應(yīng)，動(dòng)態(tài)Sql是根據(jù)Object定義信息拼接Sql語(yǔ)句并在真實(shí)業(yè)務(wù)庫(kù)中執(zhí)行Sql語(yǔ)句。
Object定義表，Property定義字段，自定義表單定義一些審計(jì)相關(guān)的字段并進(jìn)行維護(hù)，包括Creator,CreationTime,IsDeleted等
定義方法，可以是執(zhí)行Sql語(yǔ)句、調(diào)用微服務(wù)、反射調(diào)用，并包括方法能夠成功執(zhí)行的附加信息定義，并對(duì)執(zhí)行參數(shù)進(jìn)行驗(yàn)證，對(duì)業(yè)務(wù)表常規(guī)的操作已經(jīng)定義到了自定義表單中，比如Create,Update,Get,List,PageList,TreeList等，不需要格外定義方法
對(duì)Object和Property的管理，同步更新業(yè)務(wù)表表結(jié)構(gòu)，他們之間需要完全的對(duì)應(yīng)。
Sprite View and Form:
自定義表單最小功能單元定義，比如用戶Item，用戶列表視圖，部門(mén)樹(shù)視圖等，抽離出Item視圖、列表視圖、樹(shù)視圖等各個(gè)單元視圖。
自定義表單視圖容器，表單不處理任何具體業(yè)務(wù)，只是將各種視圖聚合起來(lái)統(tǒng)一管理，可以對(duì)視圖進(jìn)行布局，可以定義規(guī)則在視圖與視圖之間傳遞數(shù)據(jù)等。
統(tǒng)一定義不同視圖/表單固定區(qū)域的控件，比如列表視圖查詢區(qū)域控件，列表功能控件，新增，刷新，批量刪除等，或者列表行控件等，再或者表單流程相關(guān)控制按鈕
視圖或者表單只定義自身需要的功能，但用到哪些地方自身是不知道的，比如用戶Item視圖放入用戶列表彈出框中，部門(mén)樹(shù)表單用Card布局等
按照Grid布局，定義常規(guī)的行列布局管理
表單列或者視圖列的內(nèi)容可以是子表單或者子視圖，運(yùn)行時(shí)當(dāng)發(fā)現(xiàn)是子視圖或者子表單，則動(dòng)態(tài)再加載配置的視圖或者表單。
視圖或者表單本身或者任何關(guān)聯(lián)數(shù)據(jù)改變，都會(huì)重新生成版本號(hào)，并通知所有應(yīng)用對(duì)應(yīng)緩存變更并刪除應(yīng)用本地緩存，瀏覽器每請(qǐng)求一個(gè)頁(yè)面，發(fā)現(xiàn)視圖或者表單版本號(hào)改變了也會(huì)更新瀏覽器本地存儲(chǔ)數(shù)據(jù)。
視圖和表單都可以定義自身規(guī)則，規(guī)則見(jiàn)上文描述。
宿主框架：
計(jì)劃將自定義表單宿主到Abp Vnext框架中，Abp框架負(fù)責(zé)登錄認(rèn)證，用戶角色管理，菜單操作權(quán)限管理等，自定義表單公開(kāi)Api供使用端調(diào)用，當(dāng)然，使用其他框架做為宿主也是一樣的。另外，工作流引擎這塊，之前是用WWF研發(fā)的一套產(chǎn)品，但是微軟沒(méi)有計(jì)劃將其遷移到.net core，基本就宣告了死刑，所以之前的文章也就停止了；流程引擎這塊后續(xù)是會(huì)重新編寫(xiě)，流程引擎+表單引擎，這塊自定義表單最終的形態(tài)，不過(guò)不都是后話了，自定義表單完全可以獨(dú)立存在。
前端(個(gè)人是做后端的，前端水平有限)：
前端的復(fù)雜程度不亞于后端，很多東西是需要配合后端一起定義的，前端+后端，才能形成一個(gè)整體。
前端可以是不同的架構(gòu)，不同的應(yīng)用，可以是瀏覽器，winform等，都是調(diào)用Api，這里選擇的是瀏覽器，技術(shù)選擇的是vue，框架選擇的是and design for vue
使用此框架，可替換其他框架，但各個(gè)控件需要做相應(yīng)的修改。
定義視圖Layout、Item、列表、Tree等視圖。
定義普通表單、Div表單等
對(duì)視圖或表單進(jìn)行包裝，包括Div、對(duì)話框、Card布局等各種包裝。
對(duì)前端各種控件進(jìn)行二次封裝，注入規(guī)則，允許觸發(fā)事件和執(zhí)行規(guī)則。
比較核心的內(nèi)容，自定義表單內(nèi)容設(shè)計(jì)變更，需要即使的通知前端，同是自定義表單定義信息訪問(wèn)又必須快速，不能有明顯的性能損失。IndexedDb存儲(chǔ)視圖/表單定義等信息，每次打開(kāi)一個(gè)頁(yè)面時(shí)，遍歷所有關(guān)聯(lián)的視圖和表單Id和版本信息，與后端緩存數(shù)據(jù)進(jìn)行比較，不同則更新本地緩存。
前端靈魂所在，視圖、表單、控件在創(chuàng)建的時(shí)候，都會(huì)注入規(guī)則，用戶進(jìn)行某個(gè)操作時(shí)，如果有對(duì)應(yīng)的事件定義，則找到規(guī)則定義，進(jìn)而找到一系列視圖/表單/空間執(zhí)行一系列規(guī)定。
為一棵樹(shù)，同后端動(dòng)態(tài)表達(dá)式比較類(lèi)似。
自定義功能：
自定義表單也不可能抽象出所有的數(shù)據(jù)模型，特殊的業(yè)務(wù)可編寫(xiě)代碼，完全自定義功能實(shí)現(xiàn)。后端一些報(bào)表或者某些業(yè)務(wù)模塊，開(kāi)發(fā)人員自己寫(xiě)業(yè)務(wù)邏輯，通過(guò)微服務(wù)或者反射配置方法，執(zhí)行具體的自定義功能。前端則可編寫(xiě)不同的自定義控件，并注冊(cè)到Vue框架中，自定義表單在某個(gè)功能上配置自定義控件名稱(chēng)即可。
前端技術(shù)選型不要選擇angular，angular的動(dòng)態(tài)控件比較死板，動(dòng)態(tài)控件不能動(dòng)態(tài)添加指令，還有其他很多限制，基本上斷了自定義表單的路了。
wike文檔地址：https://gitee.com/kuangqifu/sprite/wikis/pages
后端開(kāi)源地址：https://gitee.com/kuangqifu/sprite
前端開(kāi)源地址：https://gitee.com/kuangqifu/spritefronts
體驗(yàn)地址：http://47.108.141.193:8031 （首次加載可能有點(diǎn)慢，用的阿里云最差的服務(wù)器）
自定義表單文章地址：https://www.cnblogs.com/spritekuang/
流程引擎文章地址：https://www.cnblogs.com/spritekuang/category/834975.html （https://www.cnblogs.com/spritekuang/p/14970992.html ）
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
