成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

基于原生JS驗(yàn)證表單組件：xy-form

張利勇 / 1617人閱讀

摘要：表單地址值為，規(guī)定向何處發(fā)送表單數(shù)據(jù)?；剀?chē)鍵會(huì)觸發(fā)表單。請(qǐng)求方式規(guī)定請(qǐng)求方式，默認(rèn)為可選。驗(yàn)證如果使用該屬性，則提交表單時(shí)不進(jìn)行驗(yàn)證。自定義表單驗(yàn)證默認(rèn)情況下，如果驗(yàn)證失敗，表單則不會(huì)提交。是一個(gè)原生組件，不限制于框架，可直接使用。

原生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

或者直接從github拷貝源碼。

使用


    ...
表單默認(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)密碼的登錄框


    
        
    
    
        
    
    
        login
        reset

渲染如下

首先輸入框均設(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~。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/110002.html

相關(guān)文章

  • angular6的響應(yīng)式表單

    摘要：在模塊里面引入要使用響應(yīng)式表單，就要從包中導(dǎo)入，并把它添加到你的的數(shù)組中。導(dǎo)入驗(yàn)證器函數(shù)響應(yīng)式表單包含了一組開(kāi)箱即用的常用驗(yàn)證器函數(shù)。這些驗(yàn)證器屬性可以和響應(yīng)式表單提供的內(nèi)置驗(yàn)證器組合使用。 1：在AppModule模塊里面引入 ReactiveFormsModule 要使用響應(yīng)式表單，就要從@angular/forms包中導(dǎo)入ReactiveFormsModule，并把它添加到你的N...

    alogy 評(píng)論0 收藏0

  • angular6的響應(yīng)式表單

    摘要：在模塊里面引入要使用響應(yīng)式表單，就要從包中導(dǎo)入，并把它添加到你的的數(shù)組中。導(dǎo)入驗(yàn)證器函數(shù)響應(yīng)式表單包含了一組開(kāi)箱即用的常用驗(yàn)證器函數(shù)。這些驗(yàn)證器屬性可以和響應(yīng)式表單提供的內(nèi)置驗(yàn)證器組合使用。 1：在AppModule模塊里面引入 ReactiveFormsModule 要使用響應(yīng)式表單，就要從@angular/forms包中導(dǎo)入ReactiveFormsModule，并把它添加到你的N...

    hzc 評(píng)論0 收藏0

  • angular6的響應(yīng)式表單

    摘要：在模塊里面引入要使用響應(yīng)式表單，就要從包中導(dǎo)入，并把它添加到你的的數(shù)組中。導(dǎo)入驗(yàn)證器函數(shù)響應(yīng)式表單包含了一組開(kāi)箱即用的常用驗(yàn)證器函數(shù)。這些驗(yàn)證器屬性可以和響應(yīng)式表單提供的內(nèi)置驗(yàn)證器組合使用。 1：在AppModule模塊里面引入 ReactiveFormsModule 要使用響應(yīng)式表單，就要從@angular/forms包中導(dǎo)入ReactiveFormsModule，并把它添加到你的N...

    MycLambert 評(píng)論0 收藏0

  • 前端框架快速開(kāi)發(fā)靜態(tài)頁(yè)面

    摘要：框架開(kāi)發(fā)解放了生產(chǎn)力，讓一個(gè)靜態(tài)頁(yè)面效果更逼真，也讓用戶體驗(yàn)逐漸上去，但是目前對(duì)網(wǎng)站的需求主要還是為了展示和宣傳一些東西，反觀教育機(jī)構(gòu)和政府部門(mén)的網(wǎng)站都是偏動(dòng)畫(huà)少，體現(xiàn)了公關(guān)的嚴(yán)肅性。 showImg(https://segmentfault.com/img/remote/1460000009262879?w=1183&h=522); 前言 最近很久沒(méi)有寫(xiě)文章，不忙也忙的生活節(jié)奏，博客...

    李世贊 評(píng)論0 收藏0

  • 前端框架快速開(kāi)發(fā)靜態(tài)頁(yè)面

    摘要：框架開(kāi)發(fā)解放了生產(chǎn)力，讓一個(gè)靜態(tài)頁(yè)面效果更逼真，也讓用戶體驗(yàn)逐漸上去，但是目前對(duì)網(wǎng)站的需求主要還是為了展示和宣傳一些東西，反觀教育機(jī)構(gòu)和政府部門(mén)的網(wǎng)站都是偏動(dòng)畫(huà)少，體現(xiàn)了公關(guān)的嚴(yán)肅性。 showImg(https://segmentfault.com/img/remote/1460000009262879?w=1183&h=522); 前言 最近很久沒(méi)有寫(xiě)文章，不忙也忙的生活節(jié)奏，博客...

    wenzi 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<