原生form表單

form 表單元素大家可能都用到過(guò)，除了可以提交表單外，還有一些內(nèi)置的表單校驗(yàn)，比如 require 、 minlength 、 maxlength ，還有各種類(lèi)型的 input ，比如 type=email 可以校驗(yàn)是否是郵箱類(lèi)型，如果不滿(mǎn)足還可以使用 pattern 進(jìn)行正則校驗(yàn)。

原生的表單驗(yàn)證大概如下

雖然丑陋，功能卻很強(qiáng)大，基本可以滿(mǎn)足一般的需求，不過(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)單介紹一下主要屬性和方法，建議閱讀在線(xià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)度，如果不滿(mǎn)足格式，會(huì)提示以下信息

當(dāng)全部滿(mǎn)足要求才能進(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í)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論