手寫表單及h5表單驗證舉例

2021-09-24 19:53:14 字數 1261 閱讀 5118

表單是乙個很重要的概念，這裡涉及到收集資料以及驗證資料，以及表單的使用者體驗。一般ui框架會有封裝好的這些功能。

這裡複習一下手寫表單，順帶複習一下表單的基本屬性，基本樣式和h5的表單驗證。

一般包含 label(optional), input,錯誤提示。錯誤提示的形式各式各樣，有h5自帶的樣式，也可以自定義乙個。下面舉例乙個包含使用者名稱和郵箱的表單。其中使用者名稱驗證是否填寫，長度在3-15字元以內，郵箱驗證是否填寫，是否符合郵箱型別。

針對以上的html,做簡單的樣式書寫。表單整體居中，提示語在最右端顯示。錯誤時為紅色。這裡簡單貼一下**。

.form


.form .input-block


.form .input-block .input-label


.form .input-block .err-msg


.form .button
h5自帶了表單驗證，驗證後的提示資訊，也有自帶的，也可以自己寫。這裡是自己寫樣式，見上面。表單有一些自帶的屬性，如min,max,step,minlength,maxlength,type="email",type="number"....等等，都與表單驗證有關係。大家可以列印出元素的validity屬性，例如，在某個觸發事件下，console.log(this.validity),結果是乙個叫做validitystate物件，如下，

針對如上表單，驗證使用者名稱及密碼，效果和**如下所示：

這裡不再貼出表單提交的**，純粹原生的話，需要封裝乙個函式，逐個獲取到資料。本質上上form.elements可以獲得所有的表單。可以通過element.value獲得表單的值。element.checked看單/複選的選擇情況，這些都是表單的共有的屬性。如果是在框架中寫，比如vue中，則很容易獲取到對應的變數。一般乙個表單是乙個變數，其下有對應的資料。驗證之後，將變數提交給後台。

關於vue中的資料提交，可以見我之前寫的一篇文章，大致如文中所述

注意這裡使用的div提交，沒有使用自帶的input type="submit",注意這個提交時會自帶重新整理，一般需要阻止自帶事件。由於現在表單基本上是非同步提交，自己寫提交函式，所以，我選擇了自己寫提交標籤。

原生h5表單驗證

近來做專案時發現h5表單驗證挺不錯的，畢竟原生的用起來比較方便簡單，在此做個總結 1.現在我們來簡單的實現乙個h5表單驗證 tip 在使用pattern時需要input不能為空，所以必須要用上required，否則pattern不會起作用。2.當然如果你想使用h5的表單驗證就必須使用submit來提...

H5表單屬性

form formaction formmethod placeholder autofocus list autocomplete list 指定文字框提供建議值的datalist元素，其值為datalist元素的id值。maxlength 設定文字框最大字元長度。pattern 用於輸入印證的正...

H5新增表單

新增表單型別如下 屬性值說明type email 限制使用者輸入必須為email型別 type url 限制使用者輸入必須為url型別 type date 限制使用者輸入必須為日期型別 type time 限制使用者輸入必須為時間型別 type month 限制使用者輸入必須為月型別 type we...