欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2019年08月20日 08:23:08   作者:XboxYan  
這篇文章主要介紹了詳解基于原生JS驗證表單組件xy-form,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

原生form表單

form 表單元素大家可能都用到過,除了可以提交表單外,還有一些內置的表單校驗,比如 requireminlength 、 maxlength ,還有各種類型的 input ,比如 type=email 可以校驗是否是郵箱類型,如果不滿足還可以使用 pattern 進行正則校驗。

原生的表單驗證大概如下

雖然丑陋,功能卻很強大,基本可以滿足一般的需求,不過ui終究過于原生,而且也不方便自定義,所以很多情況下這種默認的表單驗證并不使用。

下面來看看 xy-form 下的效果

結構基本和原生類似,也不需要額外的 js 邏輯

可以說丑小鴨立馬變成白天鵝了。

xy-form

xy-formxy-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 規(guī)范。

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

  • 表單地址 action

值為 URL ,規(guī)定向何處發(fā)送表單數(shù)據(jù)。

回車鍵會觸發(fā)表單。

  • 請求方式 method

規(guī)定請求方式,默認為 get ,可選 post 。

  • 驗證 novalidate

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

方法

  • 提交 submit

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

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

  • 清空 reset

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

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

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

<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 時會提示以下信息

其次,密碼框規(guī)定了 minlength 屬性,表示最小字符長度,如果不滿足格式,會提示以下信息

當全部滿足要求才能進行提交,可在控制臺查看提交的表單數(shù)據(jù),格式為formData,可轉換json。

自定義表單

自定義表單提交

當表單帶有 action 屬性時,回車鍵可以觸發(fā)表單提交,如果包含 htmltype="submit" 的按鈕時,點擊該按鈕可以觸發(fā)表單提交。

如果想手動通過 ajax 提交,可以去除 action 屬性,這樣就不會觸發(fā)默認表單提交效果了。

可通過 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 可以自定義校驗規(guī)則,比如確認重復密碼

pwdAgain.customValidity = {
  method:(el)=>{
    return el.value == pwd.value;
  },
  tips:'前后密碼不一致'
}

詳情可參考xy-input 的文檔

其他

xy-form 并不是一個獨立的組件,很多表單元素,如 xy-inputxy-checkbox 、 xy-radio 等等均未提及,可參考 文檔 ,有了這些組件,可以很輕松的完成表單校驗,如文章開所示。

xy-form 是一個原生web組件,不限制于框架,可直接使用。如果想使用其他類似的組件,可關注xy-ui,匯集了其他各類常見交互組件,歡迎star~。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

最新評論