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

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