詳解基于原生JS驗(yàn)證表單組件xy-form
原生form表單
form
表單元素大家可能都用到過(guò),除了可以提交表單外,還有一些內(nèi)置的表單校驗(yàn),比如 require
、 minlength
、 maxlength
,還有各種類(lèi)型的 input
,比如 type=email
可以校驗(yàn)是否是郵箱類(lèi)型,如果不滿足還可以使用 pattern
進(jìn)行正則校驗(yàn)。
原生的表單驗(yàn)證大概如下
雖然丑陋,功能卻很強(qiáng)大,基本可以滿足一般的需求,不過(guò)ui終究過(guò)于原生,而且也不方便自定義,所以很多情況下這種默認(rèn)的表單驗(yàn)證并不使用。
下面來(lái)看看 xy-form
下的效果
結(jié)構(gòu)基本和原生類(lèi)似,也不需要額外的 js
邏輯
可以說(shuō)丑小鴨立馬變成白天鵝了。
xy-form
xy-form
是 xy-ui
新增了一類(lèi)組件,主要用于表單提交和表單驗(yàn)證,完全可以取代原生 form
表單,下面簡(jiǎn)單介紹一下主要屬性和方法,建議閱讀在線文檔 ,可以實(shí)時(shí)交互。
使用方式
使用方式很簡(jiǎn)單
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>
表單默認(rèn)行為
屬性
xy-form
內(nèi)置了以下屬性,基于 html5
規(guī)范。
這里的默認(rèn)行為指的是,點(diǎn)擊 submit
按鈕或者回車(chē),表單首先對(duì)表單元素進(jìn)行格式校驗(yàn),如果有誤則會(huì)將有誤的地方標(biāo)識(shí)出來(lái),全部正確后才能進(jìn)行提交。
- 表單地址
action
值為 URL
,規(guī)定向何處發(fā)送表單數(shù)據(jù)。
回車(chē)鍵會(huì)觸發(fā)表單。
- 請(qǐng)求方式
method
規(guī)定請(qǐng)求方式,默認(rèn)為 get
,可選 post
。
- 驗(yàn)證
novalidate
如果使用該屬性,則提交表單時(shí)不進(jìn)行驗(yàn)證。
方法
- 提交
submit
當(dāng)表單內(nèi)包含 htmltype="submit"
的按鈕時(shí),點(diǎn)擊該按鈕可以觸發(fā)表單提交。
可通過(guò) form.submit()
主動(dòng)觸發(fā)。
- 清空
reset
當(dāng)表單內(nèi)包含 htmltype="reset"
的按鈕時(shí),點(diǎn)擊該按鈕可以清空表單。
可通過(guò) form.reset()
主動(dòng)觸發(fā)。
下面是一個(gè)最賬號(hào)密碼的登錄框
<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>
渲染如下
首先輸入框均設(shè)置了 required
屬性,表示必填項(xiàng),如果不輸入在 submit
時(shí)會(huì)提示以下信息
其次,密碼框規(guī)定了 minlength
屬性,表示最小字符長(zhǎng)度,如果不滿足格式,會(huì)提示以下信息
當(dāng)全部滿足要求才能進(jìn)行提交,可在控制臺(tái)查看提交的表單數(shù)據(jù),格式為formData,可轉(zhuǎn)換json。
自定義表單
自定義表單提交
當(dāng)表單帶有 action
屬性時(shí),回車(chē)鍵可以觸發(fā)表單提交,如果包含 htmltype="submit"
的按鈕時(shí),點(diǎn)擊該按鈕可以觸發(fā)表單提交。
如果想手動(dòng)通過(guò) ajax
提交,可以去除 action
屬性,這樣就不會(huì)觸發(fā)默認(rèn)表單提交效果了。
可通過(guò) form.formdata
獲取表單的值。
sumbitBtn.onclick = function(){ fetch('/login', { method: 'POST', body: form.formdata, }) .then(function(data){ // }) }
自定義表單驗(yàn)證
默認(rèn)情況下,如果驗(yàn)證失敗,表單則不會(huì)提交。
可以通過(guò)表單的 form.checkValidity()
方法手動(dòng)校驗(yàn)所有表單元素,也可通過(guò) form.validity
獲取驗(yàn)證合法性。
sumbitBtn.onclick = function(){ if(form.checkValidity()){ //全部驗(yàn)證通過(guò) XyDialog.success({ title:"全部驗(yàn)證通過(guò)", content:JSON.stringify(form.formdata.json) }) } }
另外, xy-input
可以自定義校驗(yàn)規(guī)則,比如確認(rèn)重復(fù)密碼
pwdAgain.customValidity = { method:(el)=>{ return el.value == pwd.value; }, tips:'前后密碼不一致' }
詳情可參考xy-input 的文檔
其他
xy-form
并不是一個(gè)獨(dú)立的組件,很多表單元素,如 xy-input
、 xy-checkbox
、 xy-radio
等等均未提及,可參考 文檔 ,有了這些組件,可以很輕松的完成表單校驗(yàn),如文章開(kāi)所示。
xy-form
是一個(gè)原生web組件,不限制于框架,可直接使用。如果想使用其他類(lèi)似的組件,可關(guān)注xy-ui,匯集了其他各類(lèi)常見(jiàn)交互組件,歡迎star~。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js正則表達(dá)式驗(yàn)證表單【完整版】
- 淺談JS驗(yàn)證表單文本域輸入空格的問(wèn)題
- JavaScript簡(jiǎn)單驗(yàn)證表單空值及郵箱格式的方法
- JavaScript表單驗(yàn)證實(shí)例之驗(yàn)證表單項(xiàng)是否為空
- 實(shí)例講解js驗(yàn)證表單項(xiàng)是否為空的方法
- js用正則表達(dá)式來(lái)驗(yàn)證表單(比較齊全的資源)
- 用 Javascript 驗(yàn)證表單(form)中的單選(radio)值
- 用 Javascript 驗(yàn)證表單(form)中多選框(checkbox)值
- js驗(yàn)證表單第二部分
- js驗(yàn)證表單大全
相關(guān)文章
JS實(shí)現(xiàn)加載時(shí)鎖定HTML頁(yè)面元素的方法
這篇文章主要介紹了JS實(shí)現(xiàn)加載時(shí)鎖定HTML頁(yè)面元素的方法,涉及javascript針對(duì)頁(yè)面元素的遍歷與屬性操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-06-06javascript實(shí)現(xiàn)Table間隔色以及選擇高亮(和動(dòng)態(tài)切換數(shù)據(jù))的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)Table間隔色以及選擇高亮(和動(dòng)態(tài)切換數(shù)據(jù))的方法,涉及javascript表格操作及按鈕實(shí)現(xiàn)表格切換的技巧,需要的朋友可以參考下2015-05-05js獲取TreeView控件選中節(jié)點(diǎn)的Text和Value值的方法
在實(shí)際項(xiàng)目中,遇到一個(gè)問(wèn)題,首先彈出一個(gè)新窗口,新窗口中放了一個(gè)TreeView控件,現(xiàn)在要解決的是,如何單擊TreeView中一個(gè)節(jié)點(diǎn),返回Text和Value到父頁(yè)面并關(guān)閉該新窗口,本文將詳細(xì)介紹此方法的實(shí)現(xiàn)2012-11-11Javascript獲取表單名稱(chēng)(name)的方法
這篇文章主要介紹了Javascript獲取表單名稱(chēng)(name)的方法,涉及javascript操作表單的技巧,需要的朋友可以參考下2015-04-04Firefox/Chrome/Safari的中可直接使用$/$$函數(shù)進(jìn)行調(diào)試
偶然發(fā)現(xiàn)的,頁(yè)面中沒(méi)有引入Prototype和jQuery??刂婆_(tái)中敲$卻發(fā)現(xiàn)是一個(gè)函數(shù)。又試著敲$$,也是個(gè)function2012-02-02