1. 一. 低代碼 - 基於MongoDB的自定義表單系統
最近上線了一個小型SAAS系統，基於SpringCloud Alibaba，阿里雲Serverless部署。系統的核心就是圍繞自定義表單展開各種業務，之前對自定義表單的各種方案做過一些調研和對比，苦於沒有找到一個比較成熟且「聰明」的方案。最終衡量利弊和開發效率之後，決定嘗試一下MongoDB + 前端表單設計的方案。業務核心以外的其他模塊Mq，Activiti等等都是一些成熟的方案。
就自定義表單這一塊內容，從用戶的角度，在表單設計頁面用前端工具咔咔連拖帶拽設計出一個表單，提交保存之後立馬就可以用了，感受還是不錯的。
背後要做的事情還挺多，簡單羅列一下，後面分幾篇文逐個記錄一下。
1. 數據類型和數據校驗的問題。
2. 多步驟表單、付款步驟以及各步驟的先決條件設置
3. 如何支持Excel的導入，導入模板的管理及校驗方式
……
一、表單的定義
現在使用前端進行自定義表單拖拽配置的工具很多，我用的Avue，有一些坑，不過能湊活用。後台所作的工作就是根據解析用戶定義的表單配置（JSON格式），把欄位、欄位類型、校驗規則、正則規則、是否必須等等屬性全部解析出來保存好，作為後續校驗用戶提交數據的依據。
2. 前端開發應該知道的幾個CSS網頁表單布局技巧
1、絕對定位
在絕大過程中，想確定一個元素在網站當中的固定位置，絕對定位是實現這個方式的解決辦法。在網頁當中，絕對定位可精確的控制元素在網頁當中的位置，我們可使用頂部、底部、左側和右側，附上一個像素值來控制元素所在的位置。
position:absolute;top:50px;right:50px
上面的CSS設置一個元素的位置從瀏覽器的頂部和右邊保持50px。你也可以在div內使用絕對定位。
2、覆蓋所有樣式
寫CSS的時候都應該知道，當你想給一個元素添加一個新的CSS樣式，但這個樣式之前已經被定義過了。此時我們可以採用！important來定義。
例如，如果我想在我的網站的特定部分的H3標題是紅色而不是黃色，可以使用下面的CSS：
.section h3 {color:red !important; }
3、居中
居中分很多情況，一般會分成文本居中和DIV的內容居中。
文本居中
文本居中使用text-align：center; 。如果想讓文本在左右兩側，可以使用左側或右側。
DIV內容
DIV內容居中跟文本居中不一樣。CSS可以這樣定義：
#div1 { display: block; margin: auto; width: anything under 100% }
把寬度設置為「100％以下」的原因是因為如果它是100％寬度，那麼如果是全寬度，並且不需要居中。最好有一個固定的寬度，如60％或550像素等。
4、垂直對齊（對於一行文本）
要使菜單的高度和文本的行高一致，可以這么設置：
.nav li{line-height:50px; height:50px;}
5、懸停效果
這適用於按鈕，文本鏈接，網站的部分，圖標等等。如果你想做一個懸停效果，可以試試：
.entry h2{font-size:36px; color:#000; font-weight:800;} .entry h2:hover{color:#ffeb3b;}
這個功能可以讓你的h2標簽的顏色從黑色變成黃色。
6、懸停效果過渡
對於懸停效果，如使用菜單或網站上的圖像，我們肯定不希望顏色快速貼近結果，所以我們可以通過使用時間變化來達到過渡的效果。
.entry h2:hover{color:#ffeb3b; transition: all 0.5s ease;}
這就使得樣式上的改變，可以是從黑色變黃色的過渡時間是0.5秒，而不是立即變成黃色。這使得懸停效果更加和諧而不會顯得太突兀。
7、a標簽的狀態
我們在遇到a標簽的時候，一定要給a標簽做樣式定義，否則特別容易造成用戶在使用上的困惑。通過樣式可以讓用戶知道這個鏈接是否被點擊過，更利於用戶體驗。
a:link {color: blue; } a:visited {color: red; }
8、輕松調整圖像大小以適應
說到這個樣式，我之前不知道可以通過以下方式達到圖片的自適應效果。作為一個新手，我相信這個效果肯定有很多人都想做，當然，我提供的方法也只是其中的一種：
img {max-width:100%;height:auto;}
這個樣式意味著最大的圖像可能是100％，並根據圖像寬度自動計算高度。在某些情況下，您可能還必須指定寬度為100％。
9、父級元素和子元素
如果ni不希望選擇任意的後代元素，而是希望縮小范圍，只選擇某個元素的子元素，請使用子元素選擇器：
h1 > strong {color:red;}
特殊情況下你可能會想定義第N個子元素的樣式，這樣就可以用到下面這個樣式：li:nth-child(n)
具體的使用方法可以去w3school上看。
10、將CSS應用於多個類或選擇器
如果你想要在所有圖片，博客部分和側邊欄上添加相同的邊框。你不必寫出相同的CSS樣式重復3次。只需列出這些項目，用逗號分隔：
.blog,img,.sidebar {border: 1px solid #000;}
3. 組件分享之前端組件——用於自定義表單的前端組件form-create
近期正在探索前端碧明、後端、系統端各類常用組件與工具，對其一些常見悔宴告的組件進行再祥穗次整理一下，形成標准化組件專題，後續該專題將包含各類語言中的一些常用組件。歡迎大家進行持續關注。
本次分享一款用於自定義表單的前端組件 form-create ，它可以通過JSON生成動態呈現、數據收集、驗證和提交功能。支持3個UI框架，並支持生成任何Vue組件。內置20種常用表單組件和自定義組件，無論多麼復雜的表單都可以輕松處理。
根據自己使用的 UI 安裝對應的版本
iview
view-design
element-ui
ant-design-vue
iview
element-ui
ant-design-vue
NodeJs:
iview
element-ui
ant-design-vue
更多內容可以參考其官方的 REAMDE
4. 背景： 前端表單頁面，在一個input輸入框需要輸入多個url。 問題： 之前我想用分號進行分隔，然後在js中
最好的解決辦法就是採用多個輸入框。
理論上說，不管你輸入的分隔符是什麼，URL中都可以含有、
5. HTML5 表單多條件驗證問題
1.輸入型控制項
Input type
用途
說明
email
電子郵件地址文本框
url
網頁URL文本框
number
數值的輸入域
屬性 值 描述
max number 規定允許的最大值
min number 規定允許的最小值
step number 規定合法的數字間隔（如果 step="3"，則合法的數是 -3,0,3,6 等）
value number 規定默認值
range
特定值的范圍的數值，以滑動條顯示
屬性 值 描述
max number 規定允許的最大值
min number 規定允許的最小值
step number 規定合法的數字間隔（如果 step="3"，則合法的數是 -3,0,3,6 等）
value number 規定默認值
Date pickers
日期，時間選擇器
僅Opera9+支持，包含date, month, week, time, datetime, datetime-local
search
用於搜索引擎，比如在站點頂部顯示的搜索框
與普通文本框用法一樣，只不過這樣更語文化
color
顏色選擇器
僅Opera支持
將原本type為text的input控制項聲明為以上特殊類型，是為了給用戶呈現不同的輸入界面（移動平台上支持這些不同的輸入界面，這里就不細說），而且表單提交時會對其值做進一步的驗證。下面展示這些新表單元素，請用支持這些表單元素的瀏覽器查看，IE對其支持最差。
E-mail:
date:
range: number: color:
2. 表單新特性和函數
2.1 placeholder
當用戶還沒有輸入值時，輸入型控制項可能通過placeholder向用戶顯示描述性說明文字或者提示信息，這在目前網站中很常見，一些JS框架都會提供類似功能，簡單的說下在舊版本中常用的解決方案，為輸入控制項創建一個label，然後通過CSS控制些label的位置使之覆蓋在輸入控制項上面，當label獲得焦點時，瀏覽器會把焦點指向輸入控制項。不過有了placeholder，新的瀏覽器就內置了這一功能，其特性值會以淺灰色樣式顯示在輸入框中，當輸入框獲得焦點並有值後，該提示信息自動消失。
如：
<p><label for="runnername">Runner:</label>
<input id="runnername"name="runnername" type="text" placeholder="First and last name" />
</p>
Runner:
2.2 autocomplete
其實在IE6中,autocomplete就已經實現，不過現在這一特性終於標准化了，瀏覽器通過autocomplete特性能夠知曉是否應該保存輸入值以備將來使用，autocomplete應該用一保護用戶敏感數據，避免本地瀏覽器對它們進行不安全的存儲。
類型
作用
on
該欄位無需保護，值可以被保存和恢復
off
該欄位需要保護，值不可以保存
unspecified
包含<form>的默認設置，如果沒有被包含在表單中或沒有指定值，則行為表現為on
如：
<form action="" method="get" autocomplete="on">
Name:<input type="text" name="name" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
當用戶提交過一次表單後，再次訪問，name的輸入框會提示你曾輸入的值，而email則不會提示。
2.3 autofocus
頁面載入時，我們通過autofocus指定某個表單元素獲得焦點，但每個頁面只允許出現一個autofocus，如果設置多個則相當於未指定些行為。目前Opera10,Chromet和Safari瀏覽器支持。如果用戶有希望焦點轉移的情況下，使用使用autofocus會惹惱用戶。
2.5 list特性和datalist
通過使用list，開發人員能夠為某個輸入型控制項構造一個選值列表，其使用方法：
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
Webpage:
請在Opera9+或Firefox10+瀏覽器中查看。
2.6 required
required 屬性規定必須在提交之前填寫輸入域（不能為空）。它是表單驗證最簡單的一種方式方法，使用方法：
Name: <input type="text" name="usr_name" required="required" />
2.7 pattern
pattern 屬性規定用於驗證 input 域的模式（pattern），模式（pattern） 是正則表達式。那些type為email或url的輸入控制項內置相關正則表達式，如果value不符合其正則表達式，那表單將通不過驗證，無法提交。使用方法：
Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />
2.8 novalidate
novalidate 屬性規定在提交表單時不應該驗證 form 或 input 域。
如：
<form action="demo_form.asp" method="get" novalidate="true">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
3. 表單驗證
表單驗證是一套系統，它為終端用戶檢測無效的數據並標記這些錯誤，是一種用戶體驗的優化，讓web應用更快的拋出錯誤，但它仍不能取代伺服器端的驗證，重要數據還要要依賴於伺服器端的驗證，因為前端驗證是可以繞過的。
目前任何錶單元素都有八種可能的驗證約束條件：
名稱
用途
用法
valueMissing
確保控制項中的值已填寫
將required屬性設為true，
<input type="text"required="required"/>
typeMismatch
確保控制項值與預期類型相匹配
<input type="email"/>
patternMismatch
根據pattern的正則表達式判斷輸入是否為合法格式
<input type="text" pattern="[0-9]{12}"/>
toolong
避免輸入過多字元
設置maxLength，<textarea id="notes" name="notes" maxLength="100"></textarea>
rangeUnderflow
限制數值控制項的最小值
設置min，<input type="number" min="0" value="20"/>
rangeOverflow
限制數值控制項的最大值
設置max，<input type="number" max="100" value="20"/>
stepMismatch
確保輸入值符合min,max,step的設置
設置max min step，<input type="number" min="0" max="100" step="10" value="20"/>
customError
處理應用代碼明確設置能計算產生錯誤
例如驗證兩次輸入的密碼是否一致，等會DEMO細說
下面展現瀏覽器自帶的驗證功能請在Chrome、Opera或Firefox中查看：
源代碼：
<form name="register1" id="register1">
<p><label for="runnername">RunnerName:</label>
<input id="runnername"name="runnername" type="text" placeholder="First and last name" required="required" autofocus="autofocus"/>
</p>
<p><label for="phone">Tel #:</label>
<input id="phone" name="phone" type="text" pattern="\d{3}-\d{4}-\d{4}"
placeholder="xxx-xxxx-xxxx"/></p>
<p><label for="emailaddress">E-mail:</label>
<input id="emailaddress" name="emailaddress" type="email"
placeholder="For confirmation only"/></p>
<p><label for="dob">DOB:</label>
<input id="dob" name="dob" type="date"
placeholder="MM/DD/YYYY"/></p>
<p>Count:<input type="number" id="count" name="count" min="0" max="100" step="10"/></p>
<p><label for="style">Shirt style:</label>
<input id="style" name="style" type="text" list="stylelist" title="Years of participation"
autocomplete="off"/></p>
<datalist id="stylelist">
<option value="White" label="1st Year"/>
<option value="Gray" label="2nd - 4th Year"/>
<option value="Navy" label="Veteran (5+ Years)"/>
</datalist>
<fieldset>
<legend>Expectations:</legend>
<p>
<label for="confidence">Confidence:</label>
<input id="confidence" name="level" type="range"
onchange="setConfidence(this.value)"
min="0" max="100" step="5" value="0"/>
<span id="confidenceDisplay">0%</span></p>
<p><label for="notes">Notes:</label>
<textarea id="notes" name="notes" maxLength="100"></textarea></p>
</fieldset>
<p><input type="submit" name="register" value="Submit" onclick=" checkForm()"/></p>
</form>