原生form表單
form表單元素大家可能都用到過，除了可以提交表單外，還有一些內置的表單校驗，比如require、minlength、maxlength，還有各種類型的input，比如type=email可以校驗是否是郵箱類型，如果不滿足還可以使用pattern進行正則校驗。
原生的表單驗證大概如下
雖然醜陋，功能卻很強大，基本可以滿足一般的需求，不過ui終究過於原生，而且也不方便自定義，所以很多情況下這種默認的表單驗證並不使用。
下面來看看xy-form下的效果
結構基本和原生類似，也不需要額外的js邏輯
可以說醜小鴨立馬變成白天鵝了。
xy-form
xy-form是xy-ui新增了一類組件，主要用於表單提交和表單驗證，完全可以取代原生form表單，下面簡單介紹一下主要屬性和方法，建議閱讀在線文檔，可以實時交互。
使用方式
使用方式很簡單
- npm
npm i xy-ui- cdn
<script type="module" src="https://unpkg.com/xy-ui/components/xy-form.js"></script>
<!--或者-->
<script type="module">
import 'https://unpkg.com/xy-ui/components/xy-form.js'
</script>- 或者直接從
github拷貝源碼。
<script type="module" src='./node_modules/xy-ui/components/xy-form.js'></script>
<!--或者-->
<script type="module">
import './node_modules/xy-ui/components/xy-form.js';
</script>使用
<xy-form>
...
</xy-form>表單默認行爲
屬性
xy-form內置了以下屬性，基於html5規範。
這裏的默認行爲指的是，點擊submit按鈕或者回車，表單首先對錶單元素進行格式校驗，如果有誤則會將有誤的地方標識出來，全部正確後才能進行提交。
- 表單地址
action
值爲URL，規定向何處發送表單數據。
回車鍵會觸發表單。
- 請求方式
method
規定請求方式，默認爲get,可選post。
- 驗證
novalidate
如果使用該屬性，則提交表單時不進行驗證。
方法
- 提交
submit
當表單內包含htmltype="submit"的按鈕時，點擊該按鈕可以觸發表單提交。
可通過form.submit()主動觸發。
- 清空
reset
當表單內包含htmltype="reset"的按鈕時，點擊該按鈕可以清空表單。
可通過form.reset()主動觸發。
下面是一個最賬號密碼的登錄框
<xy-form action="/login" method="post">
<xy-form-item legend="user">
<xy-input name="user" required placeholder="user"></xy-input>
</xy-form-item>
<xy-form-item legend="password">
<xy-input name="password" required type="password" placeholder="password" minlength="6"></xy-input>
</xy-form-item>
<xy-form-item>
<xy-button type="primary" htmltype="submit">login</xy-button>
<xy-button htmltype="reset">reset</xy-button>
</xy-form-item>
</xy-form>渲染如下
首先輸入框均設置了required屬性，表示必填項，如果不輸入在submit時會提示以下信息
其次，密碼框規定了minlength屬性，表示最小字符長度，如果不滿足格式，會提示以下信息
當全部滿足要求才能進行提交，可在控制檯查看提交的表單數據，格式爲formData，可轉換json。
自定義表單
自定義表單提交
當表單帶有action屬性時，回車鍵可以觸發表單提交，如果包含htmltype="submit"的按鈕時，點擊該按鈕可以觸發表單提交。
如果想手動通過ajax提交，可以去除action屬性，這樣就不會觸發默認表單提交效果了。
可通過form.formdata獲取表單的值。
sumbitBtn.onclick = function(){
fetch('/login', {
method: 'POST',
body: form.formdata,
})
.then(function(data){
//
})
}自定義表單驗證
默認情況下，如果驗證失敗，表單則不會提交。
可以通過表單的form.checkValidity()方法手動校驗所有表單元素，也可通過form.validity獲取驗證合法性。
sumbitBtn.onclick = function(){
if(form.checkValidity()){
//全部驗證通過
XyDialog.success({
title:"全部驗證通過",
content:JSON.stringify(form.formdata.json)
})
}
}另外，xy-input可以自定義校驗規則，比如確認重複密碼
pwdAgain.customValidity = {
method:(el)=>{
return el.value == pwd.value;
},
tips:'前後密碼不一致'
}詳情可參考xy-input的文檔
其他
xy-form並不是一個獨立的組件，很多表單元素，如xy-input、xy-checkbox、xy-radio等等均未提及，可參考文檔，有了這些組件，可以很輕鬆的完成表單校驗，如文章開所示。
xy-form是一個原生web組件，不限制於框架，可直接使用。如果想使用其他類似的組件，可關注xy-ui，彙集了其他各類常見交互組件，歡迎star~。
