基于原生JS驗證表單組件：xy-form

張利勇發布于2019-08-26 14:05 / 1604人閱讀

摘要：表單地址值為，規定向何處發送表單數據。回車鍵會觸發表單。請求方式規定請求方式，默認為可選。驗證如果使用該屬性，則提交表單時不進行驗證。自定義表單驗證默認情況下，如果驗證失敗，表單則不會提交。是一個原生組件，不限制于框架，可直接使用。

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

或者直接從github拷貝源碼。

使用

...

表單默認行為 屬性

xy-form內置了以下屬性，基于html5規范。

這里的默認行為指的是，點擊submit按鈕或者回車，表單首先對表單元素進行格式校驗，如果有誤則會將有誤的地方標識出來，全部正確后才能進行提交。

表單地址action

值為URL，規定向何處發送表單數據。

回車鍵會觸發表單。

請求方式method

規定請求方式，默認為get,可選post。

驗證novalidate

如果使用該屬性，則提交表單時不進行驗證。

方法

提交submit

當表單內包含htmltype="submit"的按鈕時，點擊該按鈕可以觸發表單提交。

可通過form.submit()主動觸發。

清空reset

當表單內包含htmltype="reset"的按鈕時，點擊該按鈕可以清空表單。

可通過form.reset()主動觸發。

下面是一個最賬號密碼的登錄框

渲染如下

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

云服務器 GPU云服務器 js常用表單驗證 js驗證表單大全 js注冊表單驗證 js表單數據驗證

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110002.html

angular6的響應式表單

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

alogy 2019-08-29 16:54 評論0 收藏0
angular6的響應式表單

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

hzc 2019-08-02 11:40 評論0 收藏0
angular6的響應式表單

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

MycLambert 2019-08-23 12:16 評論0 收藏0
前端框架快速開發靜態頁面

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

李世贊 2019-08-29 12:31 評論0 收藏0
前端框架快速開發靜態頁面

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

wenzi 2019-08-22 11:03 評論0 收藏0